print-el
v1.0.8
Published
Print a HTML element
Downloads
30
Readme
PRINT-EL - PRINT A HTML ELEMENT IN THE BROWSER
Simple library for printing a HTMLElement or HTML string on the browser.
COMPATIBILITY
Should be compatible with most major browsers.
INSTALL
npm i print-el
USAGE
import printEl from "print-el";
printEl(targetElement, options);
API
targetElement
targetElement can be
- a string for query selector element (Example:
#printElement
) - a element in the page (Example:
document.getElementById('printElement')
) - a HTML string (Example:
<h1 class="title">Print title</h1>
)
options
| name | type | default | description | | --------------- | ------- | ------- | --------------------------------------------------------------------------------- | | pageSize? | string | A4 | The valid value here: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size | | margin? | number | 20 | Margin of page | | useGlobalStyle? | boolean | true | Use the styles of the page for printing, if not -> must be define more custom CSS | | css? | string | | Custom CSS for printing |
Example
import printEl from "print-el";
// Print element by id
printEl(document.getElementById("reportTable"), { useGlobalStyle: true });
// Print html
const htmlContent = `
<div>
<h1>Report 2020</h1>
<table>...</table>
</div>
`;
const customCSS = `
h1 {
color: red;
}
table {
margin: 10px;
}
`;
printEl(htmlContent, { useGlobalStyle: false, css: customCSS });
Example with React component
import React from "react";
import printEl from "print-el";
import ReactDom from "react-dom";
const tempEl = document.createElement("div");
ReactDOM.render(<ReactComponent {...props} />, tempEl);
printEl(tempEl.outerHTML, {
useGlobalStyle: false,
});
NOTE
- The style for printing element, should not depend on parent element. Example:
<body class="dark">
<div class="print-content">...</div>
</body>
.dark .print-content {
background: black;
color: white;
}
Next feature
- The print element will not be depended on parent element.