npm install jspdf html2canvas --save
# 或者
yarn add jspdf html2canvas

<template>
    <div id="pdfinsurancepdf">
        <div style="width: 490pt;margin: auto;">
            <div class="title" style="padding:20pt">
                <el-button type="primary" @click="downpdf">下載PDF</el-button>
                 <el-divider></el-divider>
            </div>
            <div id="page1">
                <img src="@/assets/1.jpg" style="width:100%;height:auto" alt="封面" />
            </div>
            <div id="page2">
                    <template>
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址">
                    </el-table-column>
                    </el-table>
                </template>
                <div>
                    <pre>
當(dāng)你在凝視著網(wǎng)頁的時(shí)候
網(wǎng)頁也正在凝視著你
流情|導(dǎo)航站
Who is liuqing？

種一棵樹最好的時(shí)間是十年前，然后就是現(xiàn)在——致想做還未來得及做的你

How lucky to meet you!

你好，這里是流情 Liuqing ，26歲，技術(shù)宅，對有趣的世界和可能有趣的你感到好奇，熱愛IT和國風(fēng)文化，
從事互聯(lián)網(wǎng)產(chǎn)品/Web開發(fā)相關(guān)工作。希望能與你在比特之海的繁星之下相見！
                    </pre>
                </div>  
            </div>
            <div id="page3">
                <div>
                    <img src="@/assets/2.jpg" style="width:100%;height:auto" alt="結(jié)束頁" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
    name:'insurancepdf',
    data() {
        return {
            compony:"pdf導(dǎo)出多頁測試",
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1516 弄'
            }]
            }
    },
    moutned() {
        console.log(123)
    },
    methods:{
        downpdf(){
            const pdf = new JsPDF('p', 'mm', 'a4');
            var divIds = ['page1', 'page2','page3'];
            const promises = divIds.map(divId => {
                const div = document.getElementById(divId);
                return html2canvas(div, {
                    allowTaint: false,
                    taintTest: false,
                    logging: false,
                    useCORS: true,
                    dpi: window.devicePixelRatio * 1,
                    scale: 2        //畫布分辨率
                });
            });
            
            Promise.all(promises).then(canvases => {
                canvases.forEach((canvas, index) => {
                    if (index > 0) {
                        pdf.addPage();
                    }
                    this.addCanvasToPdf(pdf, canvas);
                });
                pdf.save('pdf導(dǎo)出多頁測試.pdf');
            }).catch(error => {
                console.error('Error generating PDF:', error);
            });
        },
        addCanvasToPdf(pdf,canvas){
            // 接下來使用canvas創(chuàng)建PDF
            var ctx = canvas.getContext('2d');
            var a4w = 190; var a4h = 277; // A4大小，210mm x 297mm，四邊各保留10mm的邊距，顯示區(qū)域190x277
            var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4顯示比例換算一頁圖像的像素高度
            var renderedHeight = 0;
            while (renderedHeight < canvas.height) {
            var page = document.createElement('canvas');
                page.width = canvas.width;
                page.height = Math.min(imgHeight, canvas.height - renderedHeight);// 可能內(nèi)容不足一頁
                
                // 用getImageData剪裁指定區(qū)域，并畫到前面創(chuàng)建的canvas對象中
                page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
                pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); // 添加圖像到頁面，保留10mm邊距
                
                renderedHeight += imgHeight;
                if (renderedHeight < canvas.height) {
                pdf.addPage();// 如果后面還有內(nèi)容，添加一個(gè)空頁
                }
                // delete page;
            }
        }
    }
    
}
</script>

<style scoped>
    #pdfinsurancepdf{
        width: 100%;
        background: #fff;
    }
    span{
        line-height: 30pt;
    }
</style>