0.1.1 • Published 4 months ago
w-print v0.1.1
W-Print
Library that prints a section of HTML to the printer.
Install
Using npm
npm install w-print
or pnpm
pnpm add w-print
How 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