npm install html2canvas --save npm install jsPDF --save
npm install jsPDF --save
下载完html2canvas和jsPDF 组件后,创建 js文件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
const htmlPdf = {
outPutPdfFn(title, html) {
html2Canvas(html, {
allowTaint: true,
useCORS: true,
scale: 4, // 将分辨率提高到特定的DPI 提高四倍
background: '#FFFFFF'
}).then(canvas => {
// 未生成pdf的html页面高度
var leftHeight = canvas.height
var a4Width = 595.28
var a4Height = 841.89 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
// 一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
// pdf页面偏移
var position = 0
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdf = new JsPDF('p', 'pt', 'a4') // A4纸,纵向
var index = 1
var canvas1 = document.createElement('canvas')
var height
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')
// var pdfName = title
function createImpl(canvas) {
console.log(leftHeight, a4HeightRef)
if (leftHeight > 0) {
index++
var checkCount = 0
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
if (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {
isWrite = false
break
}
}
if (isWrite) {
checkCount++
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
if (height <= 0) {
height = a4HeightRef
}
} else {
height = leftHeight
}
canvas1.width = canvas.width
canvas1.height = height
console.log(index, 'height:', height, 'pos', position)
var ctx = canvas1.getContext('2d')
ctx.drawImage(
canvas,
0,
position,
canvas.width,
height,
0,
0,
canvas.width,
height
)
// var pageHeight = Math.round((a4Width / canvas.width) * height)
// pdf.setPageSize(null,pageHeight)
if (position !== 0) {
pdf.addPage()
}
pdf.addImage(
canvas1.toDataURL('image/jpeg', 1.0),
'JPEG',
10,
10,
a4Width,
(a4Width / canvas1.width) * height
)
leftHeight -= height
position += height
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas)
} else {
pdf.save(title + '.pdf')
}
}
}
// 当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(
pageData,
'JPEG',
0,
0,
a4Width,
(a4Width / canvas.width) * leftHeight
)
pdf.save(title + '.pdf')
} else {
try {
pdf.deletePage(0)
setTimeout(createImpl, 500, canvas)
} catch (err) {
// console.log(err);
}
}
})
}
}
export default htmlPdf
组件內引用
import htmlPdf from '@/utils/htmlToPdf.js' // 这个根据自己所写的文件位置来引入
htmlPdf.outPutPdfFn('导出pdf名字', document.querySelector('#myHTML'))