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
7 years ago