vue使用jspdf_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') 方法【不能进行滚动条隐藏，否则只打印滚动条当前界面】

这里是需要打印的模块

点击下载

​

​

export default {

data () {

return {

htmlTitle: '页面导出PDF文件名'

}

}

}

问题：

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