jeep-html-toprint v0.0.1

Stencil HTML to Print Web Component

HTMLtoPrint is a Web Component to print HTML Elements placed in a slot placeholder inside the Web Component.

The slot placeholder must be named "toprint".

The style applied to these HTML Elements must be passed in a string to the Web Component through the property slotstyle and should not be declared in a style tag or css file of the parent component or javascript script.

HTMLtoPrint is only compatible with Chrome and Safari browsers and will issue a warning message "Error: Browser not compatible yet" for any others browsers.

HTMLtoPrint is listening to a Custom Event "printPage" to launch the Print Dialog Window. From this window, one can select a printer or the pdf converter.

Usage

    let slotStyle = "<style>";
    slotStyle += "h2 {margin:15px;font: 20px Calibri;font-weight: bold;text-align: center;}";
    slotStyle += "h3 {margin:15px;font: 12px Calibri;font-weight: normal;text-align: left;}";
    slotStyle += "table {width: 100%;font: 15px Calibri;}";
    slotStyle += "table, th, td {border: solid 1px #AAA; border-collapse: collapse;";
    slotStyle += "padding: 2px 3px;}";
    slotStyle += ".left {text-align: left;}";
    slotStyle += ".center {text-align: center;font-weight: normal;}";
    slotStyle += ".table-tr-header {background-color:rgb(193,195,203);}";
    slotStyle += "</style>";

  <jeep-html-toprint slotstyle={slotStyle}>
    <div slot="toprint">
      <h3></h3>
      <h2>Hello World</h2>
      <table>
        <tr class="table-tr-header">
          <th class="left">Firstname</th>
          <th class="left">Lastname</th> 
          <th class="center">Age</th>
        </tr>
        <tr>
          <td class="left">Jill</td>
          <td class="left">Smith</td> 
          <td class="center">50</td>
        </tr>
        <tr>
          <td class="left">Eve</td>
          <td class="left">Jackson</td> 
          <td class="center">94</td>
        </tr>
      </table> 
    </div>   
  </jeep-html-toprint>

HTMLtoPrint verify that a slot named "toprint" exist, otherwise a warning message will be issued "Error: slot name toprint doesn't exist".

To use the Web Component as script tag

Put the following script tag in the head of your index.html file

<script src='https://unpkg.com/stencil-htmltoprint@latest/dist/jeephtmltoprint.js'></script>

Add this in the body tag

<jeep-html-toprint>
  <div slot="toprint">
    <h2>Hello World</h2>
    <table>
      <tr class="table-tr-header">
        <th class="left">Firstname</th>
        <th class="left">Lastname</th> 
        <th class="center">Age</th>
      </tr>
      <tr>
        <td class="left">Jill</td>
        <td class="left">Smith</td> 
        <td class="center">50</td>
      </tr>
      <tr>
        <td class="left">Eve</td>
        <td class="left">Jackson</td> 
        <td class="center">94</td>
      </tr>
    </table> 
  </div>   
</jeep-html-toprint>
<script>
  var slotStyle = "<style>";
  slotStyle += "h2 {margin:15px;font: 20px Calibri;font-weight: bold;text-align: center;}";
  slotStyle += "h3 {margin:15px;font: 12px Calibri;font-weight: normal;text-align: left;}";
  slotStyle += "table {width: 100%;font: 15px Calibri;}";
  slotStyle += "table, th, td {border: solid 1px #AAA; border-collapse: collapse;";
  slotStyle += "padding: 2px 3px;}";
  slotStyle += ".left {text-align: left;}";
  slotStyle += ".center {text-align: center;font-weight: normal;}";
  slotStyle += ".table-tr-header {background-color:rgb(193,195,203);}";
  slotStyle += "</style>";
  document.querySelector('jeep-html-toprint').setAttribute('slotstyle',slotStyle);
  var cmpt = document.querySelector('jeep-html-toprint');
  var ev = new CustomEvent("printPage", { bubbles: true, detail: {}});
  cmpt.componentOnReady().then(()=> {
    cmpt.dispatchEvent(ev);
  });
</script>

To use the Web Component in a stencil-app-starter app

npm install stencil-htmltoprint@latest --save

Add in the app-root.tsx

import 'stencil-htmltoprint';

Then you can use the element anywhere in your template, JSX, html etc

Stencil App that shows an integration of stencil-htmltoprint web component

To start this Project

clone this repo to a new directory:

git clone https://github.com/jepiqueau/stencil-html-to-print.git my-app
cd my-app
git remote rm origin
npm install

npm start

To run the unit and end-to-end tests once, run:

npm test

To run the unit tests once, run:

npm run test.spec

To run end-to-end tests once, run:

npm run test.e2e