第一步 安装组件
//安装print-js
npm install print-js --save
//删除print-js
npm uninstall print-js
//安装固定版本
npm install print-js@版本号 --save
// 全局安装
npm install print-js --save -g
第二步 引入组件
安装成功后，可以在当前目录下得根目录下的package.json文件查看。
可以全局引入即（在main.js中引入），也可以在需要的文件里面引入
import print from "print-js";
第三步 使用组件，（这里使用的是局部引入）
<template>
<div id="printTable"> </div>
<div @click="bindPrint">打印</div>
</template>
<script>
import print from "print-js"
export default {
data () {
return {
}
},
methods:{
bindPrint( () => {
printJS({
printable: "printTable",
type:'html',
header:null,
targetStyles:['*'],
style:"@page {margin:0 10mm}"
})
})
}
}
</script>
print-js 参数配置
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| printable | String、Object | pdf或图像url、html元素id或json数据对象。 | null | null |
| type | String | 打印的类型 | pdf, html, image, json and raw-html | 'pdf' |
| header | String、Boolean | 用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。 | null | true |
| headerStyle | String | 要应用于标题文本的可选标题样式 | null | 'font-weight: 300;' |
| maxWidth | Number | 最大文档宽度（以像素为单位）。根据需要更改此项。打印HTML、图像或JSON时使用。 | null | 800 |
| css | String | 这允许我们传递一个或多个css文件URL，这些URL应应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。 | null | null |
| style | String | 这允许我们传递一个自定义样式的字符串，该字符串应用于正在打印的html。 | null | null |
| scanStyles | Boolean | 设置为false时，库不会处理应用于正在打印的html的样式。使用css参数时非常有用。 | true, false | true |
| targetStyle | String | 默认情况下，打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。示例： ['padding-top', 'border-bottom'] | null | null |
| targetStyles | 但是，与“targetStyle”相同，这将处理一系列样式中的任何样式。例如：['border', 'padding']，将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。也可以传递['*']来处理所有样式。 | null | null | |
| ignoreElements | Array | 接受打印父html元素时应忽略的html ID数组。 | null | [ ] |
| properties | String | 打印JSON时使用。这些是对象属性名称。 | null | null |
| gridHeaderStyle | String | 打印JSON数据时网格标题的可选样式。 | null | 'font-weight: bold;' |
| gridStyle | String | 打印JSON数据时网格行的可选样式。 | null | 'border: 1px solid lightgray; margin-bottom: -1px;' |
| repeatTableHeader | Boolean | 打印JSON数据时使用。设置为false时，数据表标题将仅显示在第一页中。 | true,false | true |
| showModal | 启用此选项可在检索或处理大型PDF文件时显示用户反馈。 | null | null | |
| modalMessage | String | showModal设置为true时向用户显示的消息。 | null | 'Retrieving Document...' |
| onLoadingStart | function | 加载PDF时要执行的函数 | null | null |
| onLoadingEnd | function | 加载PDF后要执行的函数 | null | null |
| documentTitle | String | 打印html、图像或json时，这将显示为文档标题。 | null | null |
| fallbackPrintable | 打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递到“可打印”中的原始pdf文档。如果在备用pdf文件中插入javascript，这可能很有用。 | null | null | |
| onPdfOpen | 打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，发生这种情况时将执行回调函数。在某些情况下，如果您希望处理打印流、更新用户界面等，它可能会很有用。 | null | null | |
| onPrintDialogClose | 浏览器打印对话框关闭后执行回调函数。 | null | null | |
| base64 | Boolean | 打印作为base64数据传递的PDF文档时使用。 | true，false | false |
