//html使用的是Ant Design Vue框架,pdf_content為生成canvas區(qū)域

<div ref="pdf_content">

     <a-table :loading="loading" :dataSource="dataSource" :columns="columns" :pagination="ipagination" @change="handleTableChange" /> 

</div>

// js

import html2canvas from 'html2canvas'

import JsPDF from 'jspdf'

getpdf() { // 未分頁

            const pdf_content = this.$refs.pdf_content

            html2canvas(pdf_content, {backgroundColor: '#fff', useCORS: true}).then((canvas) => { // 獲取圖片

                const dataURL = canvas.toDataURL('image/png')

                console.log(dataURL) // 生成的圖片

                var contentWidth = canvas.width

                var contentHeight = canvas.height

                // 一頁pdf顯示html頁面生成的canvas高度;

                var pageHeight = (contentWidth / 592.28) * 841.89

                // 未生成pdf的html頁面高度

                var leftHeight = contentHeight

                // 頁面偏移

                var position = 0

                // a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高

                var imgWidth = 595.28

                var imgHeight = (595.28 / contentWidth) * contentHeight

                var pageData = canvas.toDataURL('image/jpeg', 1.0)

                var pdf = new JsPDF('', 'pt', 'a4')

                // 有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)

                // 當內容未超過pdf一頁顯示的范圍，無需分頁

                if (leftHeight < pageHeight) {

                    // 在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設置在pdf中顯示；

                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

                    // pdf.addImage(pageData, 'JPEG', 20, 40, 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('訂單列表')

            })

        }

var pdf = new jsPDF("x", "pt", [595, 750]);

pdf.setFont("simhei"); // 使用字體

const source = document.getElementsByClassName("content")[0];

var options = {

pagesplit: false, //設置是否自動分頁

background: "#FFFFFF", //如果導出的pdf為黑色背景，需要將導出的html模塊內容背景 設置成白色。

};

await pdf.html(source, {

callback: function (pdf1) {

pdf1.save("test.pdf");

},

margin: [30, 0, 30, 0],

});

pdf.save("test.pdf");