关于打印工具print-js的使用
https://www.jianshu.com/p/f6f09dd9f7db
第一步 安装组件
//安装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 |