VUE使用html2canvas以及JsPdf依赖完成页面转pdf图片

下载依赖：html2canvas、jspdf

npm install html2canvas jspdf --save

新建htmlToPdf.js文件

// 导出页面为PDF格式  
import html2Canvas from 'html2canvas' // 导入依赖  
import JsPDF from 'jspdf'  
import {  
 Message, Loading // 导入UI组件  
} from 'element-ui'  
let loading;  
export default{  
 install (Vue, options) {  
 Vue.prototype.getPdf = function () {  
 loading = Loading.service({ // 这里添加了loading效果  
 lock: true,  
 text: '正在下载pdf...',  
 background: 'rgba(0,0,0,.5)'  
 });  
 let title = this.htmlTitle // 文件名称  
 html2Canvas(document.querySelector('#pdfDom'), {  
 allowTaint: true  
 }).then(function (canvas) {  
 console.log(canvas)  
 let contentWidth = canvas.width;  
 let contentHeight = canvas.height;  
 if (contentWidth === '' || contentWidth === undefined || contentHeight === '' || contentHeight === undefined) { // 判断是否转换失败  
 loading.close();  
 Message.error('转换pdf失败，请稍后再试！')  
 }  
 let pageHeight = contentWidth / 595 \* 842  
 let leftHeight = contentHeight  
 let position = 0  
 let imgWidth = 595  
 let imgHeight = 595 / 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 -= 842  
 if (leftHeight > 0) {  
 PDF.addPage()  
 }  
 }  
 }  
 loading.close(); // 关闭loading效果  
 PDF.save(title + '.pdf')  
 })  
 }  
 }  
}  

​

在main.js中进行引用

import htmlToPdf from './tools/htmlToPdf' // 导出pdf  
Vue.use(htmlToPdf)

使用方法：

调用getPdf('需要打印的模块ID') 方法【不能进行滚动条隐藏，否则只打印滚动条当前界面】

<div id\="pdfDom"\>这里是需要打印的模块</div\>  
<el-button type\="primary" size\="small" @click\="getPdf('#pdfDom')"\>点击下载</el-button\>  
​  
​  
export default {  
 data () {  
 return {  
 htmlTitle: '页面导出PDF文件名'  
 }  
 }  
 }

问题：

打印的页面我设置了A4比例的595 * 842，但是测试了几台电脑，发现不同分辨率会出现打印页面不同比例的问题，导致最后有些电脑会将页面比例放大一些，每页少打印一部分到下一页的坑【打印word文档出现裁剪分页出错问题】