下载依赖: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文档出现裁剪分页出错问题】