1.使用 html2canvas 截图截下指定DOM节点,可保留完整的样式
2.使用 jspdf 添加图片,可打印、预览或下载
使用时调用函数并传入参数即可,operate相关代码可根据需求修改
注:此函数分页打印时所有页码均加上白边,白边高度由上偏移控制
注:此函数会将宽度超过952并且可用一页打印完的DOM节点使用横向打印
// 添加依赖包
{
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1"
}
// 引入
import JsPDF from 'jspdf'
import html2Canvas from 'html2canvas'
/**
* @param dom 要打印的DOM节点
* @param pdfTitle PDF的文件名
* @param operate 打印或下载
*/
async function htmlToPdf(dom, pdfTitle, operate) {
// dom.style.zoom = 1.7
return new Promise((resolve, reject) => {
let PDF = new JsPDF('', 'pt', 'a4')
html2Canvas(dom).then(function (canvas) {
// dom.style.zoom = 1
// 是否超出最大宽度(有滚动条)
let overflow = dom.offsetWidth > 952
// 是否横排
let lPrint = false
// 内容大小
let contentWidth = canvas.width
let contentHeight = canvas.height
console.log('内容大小', contentWidth, contentHeight)
// 左偏移(向右)、上偏移(向下)
let positionX = 20
let positionY = 20
// 页面上下白边的高度
let paddingY = positionY - 1
console.log('左偏移', positionX)
console.log('上偏移', positionY)
// 纸张大小
let A4Width = 595.28
let A4Height = 841.89
if (
overflow &&
contentHeight + 2 * positionX < (contentWidth / 841.89) * 595.28
) {
console.log('内容溢出且能一页打完,使用横向打印表格')
lPrint = true
A4Width = 841.89
A4Height = 595.28
}
console.log('A4纸张大小', A4Width, A4Height)
let pageHeight = (contentWidth / A4Width) * A4Height
console.log('页面高度', pageHeight)
let leftHeight = contentHeight
console.log('剩余未打印内容高度', leftHeight)
let imgWidth = A4Width - 2 * positionX
let imgHeight = (imgWidth / contentWidth) * contentHeight
console.log('图片大小', imgWidth, imgHeight)
let pageData = canvas.toDataURL('image/jpeg', 1)
if (leftHeight < pageHeight - 2 * positionY) {
// 水平
if (lPrint) {
PDF.deletePage(1)
PDF.addPage([A4Width, A4Height], 'l')
}
PDF.addImage(
pageData,
'JPEG',
positionX,
positionY,
imgWidth,
imgHeight
)
} else {
while (leftHeight > 0) {
PDF.addImage(
pageData,
'JPEG',
positionX,
positionY,
imgWidth,
imgHeight
)
// 填充上方白边
PDF.setFillColor(255, 255, 255)
PDF.rect(0, 0, A4Width, paddingY, 'F')
leftHeight = leftHeight - pageHeight + 2 * positionX
positionY = positionY - A4Height + 2 * positionX
console.log('剩余未打印内容高度', leftHeight)
if (leftHeight > 0) {
// 填充下方白边
PDF.setFillColor(255, 255, 255)
PDF.rect(0, A4Height - paddingY, A4Width, paddingY, 'F')
PDF.addPage()
}
}
}
if (operate == 'download') {
// 下载
PDF.save(pdfTitle)
}
if (operate == 'print') {
// 预览打印(注释代码可能白屏,无法预览和调起打印窗口)
// PDF.autoPrint()
// PDF.output('dataurlnewwindow')
PDF.setProperties({ title: pdfTitle })
let w = window.open(PDF.output('bloburl'), '_blank')
w.print()
}
resolve()
})
})
}