w-print
v0.1.1
Published
Library that prints a section of HTML to the printer.
Downloads
4
Readme
W-Print
Library that prints a section of HTML to the printer.
Install
Using npm
npm install w-printor pnpm
pnpm add w-printHow to use?
Being framework-agnostic in JavaScript, you can use it with React, Vue.js, Angular, Vanilla.js, etc
Example using vue 3
import {printContent} from 'w-print'
const printFn = async () => {
// Call to the printContent function with an object of parameters
await printContent({
id: 'printhis', // Identifier for the tag
// Note: In this version, you can pass this function even if not used
beforeOpenCallback() {
// Callback function before opening the print
// Even if not used, it needs to be provided
// It can be left empty if not used
},
openCallback() {
// Callback function when opening the print
// You can provide logic here as needed
},
closeCallback() {
// Callback function when closing the print
// You can provide logic here as needed
},
});
};
<template>
<div>
<p id="printhis">Hi, print this!!</p>
<button @click="printFn">Print</button>
</div>
</template>
w-print API
| Parame | Explain | Type | OptionalValue | DefaultValue |
| ------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------- | ------------ |
| id | Range print ID, required value | String | — | — |
| standard | Document type (Print local range only) | String | html5/loose/strict | html5 |
| extraHead | <head></head>Add DOM nodes in the node, and separate multiple nodes with , (Print local range only) | String | — | — |
| extraCss | <link> New CSS style sheet , and separate multiple nodes with ,(Print local range only) | String | — | - |
| popTitle | <title></title> Content of label (Print local range only) | String | — | - |
| openCallback | Call the successful callback function of the printing tool | Function | Returns the instance of Vue called at that time | - |
| closeCallback | Close the callback function of printing tool success | Function | Returns the instance of Vue called at that time | - |
| beforeOpenCallback | Callback function before calling printing tool | Function | Returns the instance of Vue called at that time | - |
| url | Print the specified URL. (It is not allowed to set the ID at the same time) | string | - | - |
| asyncUrl | Return URL through 'resolve()' | Function | - | - |
| preview | Preview tool | Boolean | - | false |
| previewTitle | Preview tool Title | String | - | preview imp |
| previewPrintBtnLabel | The name of the preview tool button | String | - | imp |
| zIndex | CSS of preview tool: z-index | String,Number | - | 20002 |
| previewBeforeOpenCallback | Callback function before starting preview tool | Function | Returns the instance of Vue | - |
| previewOpenCallback | Callback function after fully opening preview tool | Function | Returns the instance of Vue | - |
original idea by kxlee