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中引入即可

image-20210910105829947

用法

image-20210910110150313

全局引用

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: '

审批日志

', 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
css 样式 // 设置打印之前为默认隐藏 #printFlows { display: none; } // 设置打印的时候,显示 #printFlows { @media print { display: block; } }

你可能感兴趣的:(前端,vue.js,javascript,css)