Page printing plug-in print js

install

npm install print-js --save

introduce

import print from 'print-js'

Use

<div id="printRef"> ... </div>
<el-button @click="onPrintJs" size="default" type="primary"> Click to print the demo </el-button>

//  Print Click 
const onPrintJs = () => {
    
    printJs({
    
        printable: 'printRef',
        type: 'html',
        css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
        scanStyles: false,
        style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
    });
};

API

Parameters	The default value is	explain
printable	null	Document source ：pdf Or image url,html Elemental id or json The object of the data
type	PDF	Printable type . Available printing options include ：pdf,html,image,json and raw-html
header	null	be used for HTML,Image or JSON Optional headers for printing . It will be placed at the top of the page . This property will accept text or raw HTML
headerStyle	‘font-weight：300;’	Optional Title style to apply to the title text
maxWidth	800	Maximum document width （ Pixels ）. Change this item as needed . In print HTML, Image or JSON When using
css	null	This allows us to pass one or more that should be applied to what is being printed html Of css file URL. The value can contain a single URL String , It can also contain multiple URL Array of
style	null	This allows us to pass a string , This string should be applied to the html.
scanStyles	true	Set to false when , The library does not handle the... That is being printed html The style of . Use css Parameters are very useful .
targetStyle	null	By default , In print HTML Element time , The library only handles certain styles . This option allows you to pass an array of styles to process . for example ：[‘padding-top’,‘border-bottom’]
targetStyles	null	And targetStyle identical , This will handle any series of styles . for example ：[‘border’,‘padding’], Will include ’border-bottom’,‘border-top’,‘border-left’,‘border-right’,‘padding-top’ etc. . You can also pass [’*'] To handle all styles ignoreElements: [] Accept print parent html Elements should be ignored html Of id Array .
properties	null	In print JSON When using . These are object attribute names .
gridHeaderStyle	‘font-weight：bold;’	Print JSON Optional style of grid title when data .
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	Print JSON Optional styles of grid rows when data
repeatTableHeader	true	In print JSON Data is used when . Set to false, The data table title is only displayed on the first page .
showModal	null	Enable this option to retrieve or process large PDF Show user feedback when file
modalMessage	‘Retrieving Document…’	When the message displayed to the user showModal Be set to true.
onLoadingStart	null	load PDF Functions to be performed when
onLoadingEnd	null	load PDF Functions to be performed after
documentTitle	‘Document’	Print html,image or json when , It will be displayed as the document title . If the user tries to save the print job as pdf file , It will also be the name of the document .
fallbackPrintable	null	Print pdf when , If the browser is not compatible （ Check the browser compatibility table ）, The library will open in a new tab pdf. This allows you to pass on different to open pdf file , Not to printable The original document of . If you are in standby pdf Inject... Into the file javascript, This may be useful .
onPdfOpen	null	Print pdf when , If the browser is not compatible （ Check the browser compatibility table ）, The library will open in a new tab pdf. You can pass the callback function here , This will be performed when this happens . Before you want to process the printing process , In some cases, such as updating the user interface , It can be very useful .
onPrintDialogClose	null	Execute the callback function after closing the browser Print dialog onError: error => throw error Callback function to execute when an error occurs .
base64	false	Print as base64 Data transmission PDF Use... When documenting
frameId	null	print.js The content to be printed will be copied to a new Frame in , This parameter is frame Of id value