科技前沿VueVue实现将页面转成PDF并下载或直接打印
Qing1.将Vue单页面转成pdf并下载
步骤1:下载对应的库
1 2
| cnpm install html2canvas; cnpm install jspdf --save
|
步骤2:创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下,编写如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
|
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default { install(Vue, options) { Vue.prototype.getPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pdfDom'), { allowTaint: true, taintTest: false, useCORS: true, y:72, dpi: window.devicePixelRatio * 4, scale: 4 }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height let pageHeight = contentWidth / 592.28 * 841.89 let leftHeight = contentHeight let position = 0 let imgWidth = 595.28 let imgHeight = 592.28 / contentWidth * contentHeight let pageData = canvas.toDataURL('image/jpeg', 1.0) let PDF = new JsPDF('', 'pt', 'a4') if (leftHeight < pageHeight) { PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 if (leftHeight > 0) { PDF.addPage() } } } PDF.save(title + '.pdf') }) } } }
|
1 2 3 4
| import htmlToPdf from '@/util/htmlToPdf' Vue.use(htmlToPdf)
|
步骤三:在vue页面中给需要打印的区域一个div标签,然后给div一个id,id名和htmlToPdf.js中选择的名字一致,代码如下:
1 2 3
| <div id="pdfDom"> ... 打印的内容 </div>
|
步骤四:在data节点中声明一个htmlTitle变量,指定为pdf文件的文件名
1 2 3 4 5 6
| data() { return { htmlTitle: 'pdf文件名' } }
|
步骤五:在vue页面中添加一个button按钮,事件名和htmlToPdf.js中的方法名保持一致。
1
| <el-button @click="getPdf()">PDF</el-button>
|
2.直接在将Vue单页面中预览打印效果
步骤一:下载打印的库
1 2
| npm i print-js npm i html2Canvas
|
步骤二:在要打印的页面引入库
1 2
| import printJS from 'print-js' import html2Canvas from 'html2Canvas'
|
步骤三:创建一个按钮,并绑定单击事件。编写对应的实现函数。
1
| <el-button @click="goPrint">打印</el-button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| methods: { goPrint() { this.isPrint = true html2Canvas(this.$refs.print, { allowTaint: true, taintTest: false, useCORS: true, dpi: window.devicePixelRatio * 4, scale: 4 }).then((canvas) => { const url = canvas.toDataURL() printJS({ printable: url, // 要打印的id type: 'image', style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' //去除页眉页脚 }) this.isPrint = false }) } }
|
总结
以上两种打印功能的实现思路都是先将单页面通过canvas转换成图片,然后再进行打印或下载PDF。