Vue 使用print-js 打印html页面

Vue 使用print-js 打印html页面

Print.js 官网

官网
优点：可以打印多种格式的内容（pdf、json、html等）
打印json时可以添加表头。打印html页时可以继承原有页面的样式，局部打印，过滤掉要打印的元素，及其方便

一、vue安装命令：

npm install print-js --save

二、引入

vue 页面引用

这个引入不需要在main.js中，直接在使用的.vue中引入即可

用法

全局引用

import 'print-js'

页面直接使用,如果开了eslint 可能会报错

printJS({ printable: 'printTest', type: 'html', scanStyles: false, targetStyles: ['*'] })

三、常用属性

属性	描述
printable	要打印的id
type	可以是 html 、pdf、 json 等
properties	是打印json时所需要的数据属性
gridHeaderStyle	打印json时可选的样式
gridStyle	打印json时可选的样式
repeatTableHeader	在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示
scanStyles	设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用
targetStyles	[’*’],这样设置继承了页面要打印元素原有的css属性
style	传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子
ignoreElements	传入要打印的div中的子元素id，使其不打印。非常好用

特殊场景：

print-js 集成 ele 或者 ant-vue 的时候，我们在打印ant-vue/ele 的html 元素的时候，是没有样式的。打印的界面很丑。

那么我们在打印的时候，就需要自定义引入ant-vue/ele 的样式.

案例：

​ 两点： css引入：ant-vue 样式。 scanStyles: 设置false

      printJS({
        header: '<h3>审批日志</h3>',
        printable: 'printFlows',
        css: 'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/2.2.2/antd.css',
        type: 'html',
        scanStyles: false
      })

当在打印一个html 的时候，界面的html 是隐藏的。只有在打印的时候，才显示该隐藏的html内容.

案例：

隐藏域 html
<div id="printTest">
</div>

css 样式
// 设置打印之前为默认隐藏
#printFlows {
  display: none;
}
// 设置打印的时候，显示
#printFlows {
  @media print {
    display: block;
  }
}