html2canvas+jspdf实现html网页转pdf，并解决图片跨域及分页问题

发表评论
3,742 views

A+

项目中需要将html页面转化为pdf保存下来，于是开始尝试网页转图片再转pdf的方案（即html2canvas+jspdf），经历了一番折腾，最终终于实现了html转pdf，虽然因为一些问题最终没有选择这种方案，但还是决定先记录下来...

直接上干货--源码:

    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"~/Content/js/healthyCabin/monitorData/html2canvas.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-keyword">var</span> downPdf = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"exportToPdf"</span>);
        downPdf.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
            <span class="hljs-comment">// 要导出pdf的节点</span>
            <span class="hljs-keyword">var</span> elements = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">"pdf_page"</span>);
            <span class="hljs-keyword">var</span> imgMap = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>();
            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> index = <span class="hljs-number">0</span>; index &lt; elements.length; index++) {
                <span class="hljs-keyword">var</span> mapIndex = index;
                html2canvas(elements[index], {
                    allowTaint: true, // 支持跨域
                    <span class="hljs-attr">useCORS</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否允许网页中img元素跨域，这个设置需要img元素支持及服务器支持</span>
                    scale: <span class="hljs-number">2</span>, <span class="hljs-comment">// 这个影响生成图片的清晰度</span>
                    background: <span class="hljs-string">"#F5F5F5"</span> <span class="hljs-comment">//背景</span>
                }).then(<span class="hljs-function">(<span class="hljs-params">canvas</span>) =&gt;</span> {
                    <span class="hljs-keyword">var</span> img = <span class="hljs-keyword">new</span> Image();
                    img.width = canvas.width;
                    img.height = canvas.height;
                    img.src = canvas.toDataURL(<span class="hljs-string">'image/jpeg'</span>, <span class="hljs-number">1.0</span>);
                    imgMap.set(mapIndex, img); <span class="hljs-comment">// 按照顺序保存图片</span>

                    <span class="hljs-keyword">if</span>(imgMap.size == elements.length) { <span class="hljs-comment">// 当所有图片都转化完毕，则进行保存操作</span>
                        <span class="hljs-keyword">var</span> pdf = <span class="hljs-keyword">new</span> jsPDF(<span class="hljs-string">''</span>, <span class="hljs-string">'pt'</span>, <span class="hljs-string">'a4'</span>);
                        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; imgMap.size; i++) {
                            <span class="hljs-comment">// canvas尺寸</span>
                            <span class="hljs-keyword">var</span> canvasWidth = imgMap.get(i).width;
                            <span class="hljs-keyword">var</span> canvasHeight = imgMap.get(i).height;
                            <span class="hljs-keyword">var</span> pageData = imgMap.get(i).src;
                            addOneImg(pdf, pageData, canvasWidth, canvasHeight);
                            <span class="hljs-keyword">if</span>(i &lt; imgMap.size<span class="hljs-number">-1</span>) {
                                pdf.addPage(); <span class="hljs-comment">// 如果还有图片未添加到pdf,则增加一个页面</span>
                            }
                        }
                        <span class="hljs-comment">// 所有图片添加完毕，保存</span>
                        pdf.save(<span class="hljs-string">"report_"</span>+checkId+<span class="hljs-string">".pdf"</span>);
                    }
                });

            };
        }
        <span class="hljs-comment">// img转化为pdf并保存</span>
        <span class="hljs-keyword">var</span> addOneImg = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">pdf, pageData, canvasWidth, canvasHeight</span>) </span>{

            <span class="hljs-comment">// a4纸的尺寸[595.28,841.89]</span>
            <span class="hljs-keyword">var</span> a4Width = <span class="hljs-number">595.28</span>;
            <span class="hljs-keyword">var</span> a4Height = <span class="hljs-number">841.89</span>;

            <span class="hljs-comment">//html页面生成的canvas在pdf中图片的宽高</span>
            <span class="hljs-keyword">var</span> imgWidth = a4Width;
            <span class="hljs-keyword">var</span> imgHeight = a4Width / canvasWidth * canvasHeight;

            <span class="hljs-comment">//一页pdf显示html页面生成的canvas高度;</span>
            <span class="hljs-keyword">var</span> pageHeight = canvasWidth / a4Width * a4Height;

            addPages(pdf, pageData, <span class="hljs-number">0</span>, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);


        }

        <span class="hljs-comment">// 递归的方式对页面进行截取并添加到pdf中</span>
        <span class="hljs-keyword">var</span> addPages = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height</span>) </span>{
            pdf.addImage(pageData, <span class="hljs-string">'JPEG'</span>, <span class="hljs-number">0</span>, position, imgWidth, imgHeight)
            <span class="hljs-comment">// 减去已经绘制的区域</span>
            canvasHeight -= pageHeight;
            position -= a4Height;
            <span class="hljs-comment">// 当还有内容未生成pdf，则新加页面，并添加图片</span>
            <span class="hljs-keyword">if</span> (canvasHeight &gt; <span class="hljs-number">0</span>) {
                pdf.addPage();
                addPages(pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);
            }
        }
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>

var downPdf = document.getElementById("exportToPdf");

downPdf.onclick = function () {

// 要导出pdf的节点

var elements = document.getElementsByClassName("pdf_page");

var imgMap = new Map();

for (var index = 0; index < elements.length; index++) {

var mapIndex = index;

html2canvas(elements[index], {

allowTaint: true, // 支持跨域

useCORS: true, // 是否允许网页中img元素跨域，这个设置需要img元素支持及服务器支持

scale: 2, // 这个影响生成图片的清晰度

background: "#F5F5F5" //背景

}).then((canvas) => {

var img = new Image();

img.width = canvas.width;

img.height = canvas.height;

img.src = canvas.toDataURL('image/jpeg', 1.0);

imgMap.set(mapIndex, img); // 按照顺序保存图片

if(imgMap.size == elements.length) { // 当所有图片都转化完毕，则进行保存操作

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

for(var i = 0; i < imgMap.size; i++) {

// canvas尺寸

var canvasWidth = imgMap.get(i).width;

var canvasHeight = imgMap.get(i).height;

var pageData = imgMap.get(i).src;

addOneImg(pdf, pageData, canvasWidth, canvasHeight);

if(i < imgMap.size-1) {

pdf.addPage(); // 如果还有图片未添加到pdf,则增加一个页面

}

// 所有图片添加完毕，保存

pdf.save("report_"+checkId+".pdf");

}

});

};

}

// img转化为pdf并保存

var addOneImg = function (pdf, pageData, canvasWidth, canvasHeight) {

// a4纸的尺寸[595.28,841.89]

var a4Width = 595.28;

var a4Height = 841.89;

//html页面生成的canvas在pdf中图片的宽高

var imgWidth = a4Width;

var imgHeight = a4Width / canvasWidth * canvasHeight;

//一页pdf显示html页面生成的canvas高度;

var pageHeight = canvasWidth / a4Width * a4Height;

addPages(pdf, pageData, 0, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);

}

// 递归的方式对页面进行截取并添加到pdf中

var addPages = function (pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height) {

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

// 减去已经绘制的区域

canvasHeight -= pageHeight;

position -= a4Height;

// 当还有内容未生成pdf，则新加页面，并添加图片

if (canvasHeight > 0) {

pdf.addPage();

addPages(pdf, pageData, position, imgWidth, imgHeight, canvasHeight, pageHeight, a4Height);

}

</script>

需要注意的有以下几点：

这段代码是以a4纸的标准转换pdf，而且能够通过配置分页节点，达到分页可控的效果。
跨域方法：一. useCORS:true，并在后台header中添加Access-Control-Allow-Origin: * 二. 使用allowTaint: true, 然后如下图修改html2canvas.js

如图，修改img.crossOrigin = 'anonymous'为img.crossOrigin = ''，并修改img.src = src为img.src = src + (src.contain("?") ? "&" : "?") + "h2c_t" + new Date().getTime()，或者也可以直接下载下方提供的js: