HTML转PDF

HTML转PDF

相关技术，插件

1. html2canvas
2. jspdf
3. canvas

vue中使用jsPdf

安装依赖：

1. npm install --save html2canvas
   

2. npm install jspdf --save

htmltopdf.js

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
/**
 * @description: 
 * @param {*} dom
 * @param {*} title
 * @return {*}
 */
export default function (dom, title) {
    //将弹窗body滚动到顶部，不然会截图不全
    return new Promise((resolve, reject) => {
        dom.scrollTop = 0
        html2Canvas(dom, {
            allowTaint: true,
            useCORS: true,
            height: dom.scrollHeight + dom.offsetHeight,
            windowHeight: dom.scrollHeight + dom.offsetHeight,
            onclone: function (html) {
                //将明细表展开
                let detailTableList = html.querySelectorAll(".fks-table");
                if (detailTableList && detailTableList.length) {
                    detailTableList.forEach((item) => {
                        item.style.maxHeight = '10000px'
                        let tableBody = item.querySelector(".fks-table__body-wrapper")
                        tableBody.style.maxHeight = '10000px'
                    })
                }
            }
        }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            //A4纸宽度为592.28，高度为841.89
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            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()
                    }
                }
            }
            // console.log(PDF)
            // console.log(PDF.output('dataurlstring'))
            PDF.save(title + '.pdf')
            resolve()
        }
        )
    })
}

使用
var dompdf = document.getElementById("from25pdf");
topdf(dompdf, this.title).then((res) => {
     console.log(res);
});