基于html2canvas.js、jspdf.js
使用前需引入这两个js文件
html部分:
<div id="print">
打印的内容区域
</div>
js部分:
downloadPdf() {
let pdfName = new Date().getTime()
let id = 'print'
var target = document.getElementById(id)
target.style.background = '#FFFFFF'
html2canvas(target, {
allowTaint: true,
dpi: window.devicePixelRatio, // 提升导出文件的分辨率
scale: 4,// 提升导出文件的分辨率
onrendered: function(canvas) {
//未生成pdf的html页面高度
var leftHeight = canvas.height
var a4Width = 190
var a4Height = 277 //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', 'mm', 'a4')
var index = 1,
canvas1 = document.createElement('canvas'),
height
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')
// var pdfName='TriButte漏洞管理平台扫描报告'
function createImpl(canvas) {
if (leftHeight > 0) {
index++
var checkCount = 0
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef
for (i = position + a4HeightRef
var isWrite = true
for (var j = 0
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(pdfName + '.pdf')
}
}
}
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, 'JPEG', 10, 10, a4Width, a4Width / canvas.width * leftHeight)
pdf.save(pdfName + '.pdf')
} else {
try {
setTimeout(createImpl, 500, canvas)
} catch (err) {
console.log(err)
}
}
}
})
}