打印html所有标签,js 打印标签里的所有内容（带分页）

是什么

利用了jspdf和html2canvas两个插件实现的，把标签内的内容转成canvas再进行打印出pdf的一项功能。

为什么

利用JS满足某些打印pdf的场景

怎么做

最简单demo

安装插件

npm i html2canvas -S

npm i jspdf -S

加入工具函数(个人习惯放在项目的util目录下)

引入两个插件，原理就是通过document.querySelector获取当前dom下的内容转换成canvas的内容，再执行打印成PDF的方法。判断的语句是用于判断当前canvas的内容是否超出一页A4纸的高度，否则就自动往下分页。

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default {

getPdf: function(dom, title = 'download') {

html2Canvas(document.querySelector(dom), {

allowTaint: true

}).then(function(canvas) {

let contentWidth = canvas.width

let contentHeight = canvas.height

let pageHeight = contentWidth / 592.28 * 841.89

let leftHeight = contentHeight

let position = 0

let imgWidth = 595.28 // A4纸宽度

let imgHeight = 592.28 / 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 -= 841.89

if (leftHeight > 0) {

PDF.addPage()

}

}

}

PDF.save(title + '.pdf')

})

}

}

未解决

分页的内容如何分配，防止切割当前的页面内容

canvas转PDF的失真(模糊)