vue+element |
您所在的位置:网站首页 › js设置打印页面参数怎么设置 › vue+element |
vue+element-ui前端使用print-js实现打印
下载依赖使用print-js实现打印功能需要打印的内容按钮调用打印函数打印函数设置默认打印横纵向(IE不生效)设置默认打印缩放比调整打印字体大小自定义字体大小生效自定义背景颜色生效参数
print-js官网链接: https://printjs.crabbly.com/ 下载依赖 npm install print-js --save在package.json文件中增加print-js依赖。 "dependencies": { "axios": "^0.19.2", "babel-polyfill": "^6.26.0", "element-ui": "^2.15.6", "file-saver": "^2.0.5", "pinyin-match": "^1.2.2", "print-js": "^1.6.0", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.1.2", "xlsx": "^0.17.0", "xlsx-style": "^0.8.13" },在需要打印的页面对应文件中引入print-js import printJS from 'print-js' 实现打印功能 需要打印的内容需要把表格打印出来,在表格外套一个div,并给一个id值。 按钮调用打印函数定义一个按钮,点击调用打印函数。 下载 打印函数不同浏览器打印样式不同,使用navigator.userAgent进行了判断。 printJS是引用的print-js对象 printtable为标签元素id type有html,json,pdf等。 header是用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。 style为自定义的样式 handlePrint () { let userAgent = navigator.userAgent; //判断是否Firefox浏览器 if (userAgent.indexOf("Firefox") > -1) { console.log('Firefox') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否chorme浏览器 if (userAgent.indexOf("Chrome") > -1){ console.log('Chrome') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', documentTitle: '', style: `@page {size:auto;margin-top:100px; margin-left:5px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } //判断是否IE浏览器 if (!!window.ActiveXObject || "ActiveXObject" in window) { console.log('IE') printJS({ printable: 'mytable1', // 标签元素id type: 'html', header: '', style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;} thead th { border-top: 1px solid #000; border-right: 1px solid #000; border-left: 1px solid #000; } tbody td { border: 1px solid #000; } tbody { text-align: center; } table { border-collapse: collapse; }`, }); } }, 设置默认打印横纵向(IE不生效)打印横向:@media print{@page {size:landscape}} 打印纵向:@media print{@page {size:portrait}} 加在style里 在style中加入body {zoom: 50%;} zoom中写需要的缩放比。 修改print-js文件 修改font_size数值(小于一定数值之后chrome浏览器内打印字体不会变小) 修改print-js文件 修改font-size生效在206行 Chrome & IE中加入这句话: -webkit-print-color-adjust: exact .back1 { -webkit-print-color-adjust: exact; background-color:rgba(250,240,230,1) !important; }火狐例子: .back1 { background-color: unset; box-shadow: inset 0 0 0 1000px rgba(250,240,230,1) }效果: |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |