盐田做网站,外贸资讯平台,杭州网站制作排名,网站地图制作工具前端实现打印的方式有很多种#xff0c;本人恰好经历了几个项目都涉及到了前端打印#xff0c;目前较为推荐Print.js来实现前端打印
话不多说#xff0c;直接上教程
官方链接: Print.js官网 在项目中如何下载Print.js 使用npm下载#xff1a;npm install print-js --sav…前端实现打印的方式有很多种本人恰好经历了几个项目都涉及到了前端打印目前较为推荐Print.js来实现前端打印
话不多说直接上教程
官方链接: Print.js官网 在项目中如何下载Print.js 使用npm下载npm install print-js --save 使用yarn下载 yarn add print-js 在项目中如何引入print.js
// 第一种 通过import的方式引入
import print from print-js// 第二种 通过CDN
https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css的方式引入script srcprint.js/script
link relstylesheet typetext/css hrefprint.css //使用Print.js模版的时候引入print.js的参数配置常用
参数描述printable默认nullpdf或图像的urlhtml元素的id或json数据的对象type打印的类型默认pdf pdf, html, image, json and raw-html.css打印的css可以是单个URL的字符串也可以是多个URL的数组style格式为一个字符串该字符串应该应用于正在打印的html样式targetStyles打印的样式数值如需采用自身页面的样式 [‘*’]onPrintDialogClose关闭浏览器打印对话框后执行的回调方法font_size参数适用于html/json,默认12pt
Print.js如何使用
import printJS from print-js;
const style page {margin:0mm 0mm 0mm 0mm;}; //设置打印页面的样式
printJS({printable: idName, // 标签元素idtype: html,header: ,targetStyles: [*],style: style,font_size: ,onPrintDialogClose: () {//打印弹窗关闭后的回调方法}});注意事项
//如需使用自身页面的样式targetStyles: [*],font_size: ,
//这两个参数必须同时存在
