第一首先是要引用
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
import PDFJS from 'pdfjs-dist'
PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'
第二页面点击按钮
第三
//要导出的div的id
var target = document.getElementById('export_content1')
html2canvas(target, { dpi: 172 }).then(function(canvas) {
console.log(canvas)
var contentWidth = canvas.width
var contentHeight = canvas.height
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html页面高度
var leftHeight = contentHeight
//pdf页面偏移
var position = 0
//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var 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('导出.pdf')
})
手机扫一扫
移动阅读更方便
你可能感兴趣的文章