Skip to content

minhquankq/print-el

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.