Simple library for printing a HTMLElement or HTML string on the browser.
Should be compatible with most major browsers.
npm i print-el
import printEl from "print-el";
printEl(targetElement, options);
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>
)
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 |
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 });
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,
});
- 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;
}
- The print element will not be depended on parent element.