html2Canvas+JsPDF在每一页上面插入内容

有一个功能，是将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')
                    }
                )
            })
        }
    }
}

遇到问题： 开始时怕会有异步问题，在第一个html2Canvas上面添加了await，发现生成的pdf会模糊，去掉即可。