纯前端js html2canvas导出pdf页面 自动分页 检测空白页 解决图片跨域问题

2023年2月21日16:41:38更新：
1.解决跨域图片导出不了的问题

引用建议：
1.js、声明img和导出pdf部分可以直接复制过去，注意一下img加载时候div的id还有导出pdf时候获取导出体的代码，js中已经注释了；
2.html部分仅供参考，不要搬过去，不要搬过去，不要搬过去；

首先引入js

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.1/html2canvas.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.0.272/jspdf.debug.js">script>

部分html代码

<div class="layui-row" style="padding: 0 20px;margin-bottom: 20px;">
    <div class="layui-card" style="padding-top: 50px" id="layuiCard">
        <div class="layui-card-header">
            <h2 style="text-align: center;font-weight: bold;">重点营运车辆卫星定位装置在线核查报告h2>
        div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space5" style="text-align: center;margin-left: 100px;margin-right: 100px">
                <div class="layui-col-md12">
                    <p class="tableTitleStyle">运输业户情况p>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <td rowspan="2">车牌号td>
                            <td rowspan="2">设备类型td>
                            <td rowspan="2">定位时间td>
                            <td colspan="7">数据对接状态td>
                        tr>
                        <tr>
                            <td>定位情况td>
                            <td>分段限速td>
                            <td>司机卡td>
                            <td>疲劳报警td>
                            <td>超速报警td>
                            <td>主动安全报警td>
                            <td>附件上传td>
                        tr>
                        thead>
                        <tbody>
                        <tr>
                            <td>冀C12345td>
                            <td>部标北斗td>
                            <td>2025-10-07 00:00:00td>
                            <td>已对接td>
                            <td>已对接td>
                            <td>已对接td>
                            <td>已对接td>
                            <td>已对接td>
                            <td>已对接td>
                            <td>已对接td>
                        tr>
                        tbody>
                    table>
                div>
                <div class="layui-col-md12">
                    <p class="tableTitleStyle">在网证明p>
                    <div class="imagebox" id="imagebox" >div>
                div>
            div>
        div>
    div>
    <div class="layui-row">
        <button style="width: 100%" class="layui-btn layuiadmin-btn-comm  layui-btn-sm"
                onclick="exportPdf()">导出pdf
        button>
    div>
div>

最后定义一个方法

		//声明img 没有图片可以跳过这一步 直接到保存pdf
        var img = new Image()
        img.crossOrigin = "Anonymous";//解决跨域图片问题
        img.src = "你的图片地址";
        //加载图片
        img.onload = function () {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            var width = img.width;
            var height = img.height;

            canvas.width = width;
            canvas.height = height;
            //绘制到canvas上
            ctx.drawImage(img, 0, 0, width, height);
            document.getElementById("imagebox").appendChild(canvas);//改成自己的id
        }
        
		//保存pdf
         exportPdf = function () {
            let elementById = document.getElementById("layuiCard");//如果想导出body，就直接ducument.body
            window.pageYOffset = 0;
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            let pdf = new jsPDF('p', 'pt', 'a4');
            html2canvas(elementById , {
                useCORS: true,
                allowTaint: false,
                taintTest: true,
                scale: 2
            }).then(function (canvas) {
                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 = 515.28;//595.28//左右边距40
                // var imgHeight = 512.28/contentWidth * contentHeight;//左右边距40
                var imgWidth = 595.28;
                var imgHeight = 595.28/contentWidth * contentHeight;

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

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );//左右边距0
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)//左右边距0
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save(carPlateNum + "重点营运车辆卫星定位装置在线核查报告" + '.pdf');
            })
        })

查看效果：