有一个功能，是将html页面转成pdf下载下来，已用html2Canvas+JsPDF实现。页面上面有一个多行标题，打印的时候多页只会在第一页有，客户想要每一页都有。
解决方法：
打印的时候，可以看做打印的区域不动，页面纸往上移，继续打印下面部分。
我的想法是，每次页面纸往上移的时候，可以少移一部分，让上个页面一部分留在下个页面，然后用我的多行标题盖住。
页面中用一个容器保留我的多行标题，打印的时候转成图片，插入要打印的头部。
点击查看代码
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (id,title,flag) {
let titleImage = ''
if(flag == 'record') {
// 标题，插入页面头部用
html2Canvas(document.querySelector('.pdf-title'), {
// allowTaint: true
useCORS:true,// 看情况选用上面还是下面的，
allowTaint: true,
scrollY: - window.screenY,
scrollX: - window.screenX,
}).then(function (canvas) {
titleImage = canvas.toDataURL('image/jpeg', 1.0)
})
}
return new Promise((resolve, reject) =>{
html2Canvas(document.querySelector(`#${id}`), {
// allowTaint: true
useCORS:true,// 看情况选用上面还是下面的，
allowTaint: true,
scrollY: - window.screenY,
scrollX: - window.screenX,
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89 // 计算每一页 PDF 的高度
let leftHeight = contentHeight // 剩余需要处理的高度，初始值: contentHeight
let position = 0 // 图像在 PDF 中的位置
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageNumber = 1;
let pageData = canvas.toDataURL('image/jpeg', 1.0)
const titleHeight = 50; // 根据实际情况调整
let PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
PDF.setPage(pageNumber)
PDF.setFontSize(10)
PDF.text(' ' + pageNumber, PDF.internal.pageSize.width - 10, PDF.internal.pageSize.height - 10, {
align: 'center'
});
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0,position, imgWidth, imgHeight);
PDF.setFontSize(10)
PDF.setPage(pageNumber)
PDF.text(' ' + pageNumber, PDF.internal.pageSize.width - 10, PDF.internal.pageSize.height - 10, {
align: 'center'
});
PDF.text(name, 0, 0, {
align: 'center'
});
if(flag == 'record') {
// 页面多截出来一点，用标题盖住
if(pageNumber == 1)leftHeight -= pageHeight
else{
leftHeight -= (pageHeight - titleHeight)
PDF.addImage(titleImage, "JPEG", 16, 0, PDF.internal.pageSize.width - 31, titleHeight)
}
position -= (841.89 - titleHeight)
} else {
leftHeight -= pageHeight
position -= 841.89
}
if (leftHeight > 0) {
PDF.addPage()
pageNumber++;
}
}
}
PDF.save(title + '.pdf')
resolve('end')
}
)
})
}
}
}