PHP － jsPDF+html2canvas实现网页截图导出PDF

mafangfang 2021-09-07 原文

刚接触PHP没多久，跟着大神做项目，遇到一个需求，需要把网页的部分内容生成PDF文件，领导将这个任务交给了本菜鸟。

PS :本文部分内容转载自 http://blog.csdn.net/pwc1996/article/details/56675541

1、首先，要先下载两个库：

jsPDF: https://github.com/MrRio/jsPDF

html2canvas: https://github.com/niklasvh/html2canvas

2、新建html页面，头部引入主要js文件

<script src="/js/jspdf.debug.js"></script>
 
<script src="/js/html2canvas.js"></script>
 
<script src="/main.js"></script>

页面内容中添加按钮触发导出PDF功能

<button id="btn-html2canvas">export PDF </button>

3、编辑main.js

main.js 中的js代码，是（2）中按钮点击执行的代码

$("#btn-html2canvas").click(function() {
    var p = $(this).data("name");
    // console.log(p);
    var  filename = p + "_fansImages.pdf";
     // 将 id 为 content 的 div 渲染成 canvas
    html2canvas(document.getElementById("content"), {
        // 渲染完成时调用，获得 canvas
        onrendered: function(canvas) {
            // 从 canvas 提取图片数据
            var imgData = canvas.toDataURL(\'image/jpeg\');
            var canWidth = canvas.width;
            var canHeight = canvas.height;
            var arrDPI = js_getDPI();//获取显示器DPI
            var dpiX = 96;
            var dpiY = 96;
            if(arrDPI.length>0){
                dpiX = arrDPI[0];
                dpiY = arrDPI[1];
            }
            // var doc = new jsPDF("p", "mm", "a4");
            var doc = new jsPDF(\'\', \'in\', [(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//设置PDF宽高为要显示的元素的宽高，将像素转化为英寸  
            // doc.addImage(imgData, \'JPEG\', 0, 0,210,297);
            doc.addImage(imgData, \'JPEG\', 0, 0,0,0);
            doc.save(filename);
        },
       background : "#f7f7f7"    //设置PDF背景色（默认透明，实际显示为黑色）
    });
});
function js_getDPI() {
    var arrDPI = new Array();
    if (window.screen.deviceXDPI != undefined) {
        arrDPI[0] = window.screen.deviceXDPI;
        arrDPI[1] = window.screen.deviceYDPI;
    }
    else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
        document.body.appendChild(tmpNode);
        arrDPI[0] = parseInt(tmpNode.offsetWidth);
        arrDPI[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);
    }
    return arrDPI;
}

这里要特别注意 canvas.toDataURL(\'image/jpeg)的参数 image/jpeg 和 doc.addImage(...,\'JPEG\',...) 的参数 JPEG务必一致
而且，我也建议这两个参数分别写 image/jpeg 和 JPEG 。
因为其他参数例如 image/png 等，导出pdf后内容为空。

4、碎碎念

原博中的main.js太简单，满足不了我的导出需求，又花了好多时间研究代码，寻找方法，大家可以对比原博和本篇，

 var p = $(this).data("name")；//，导出的PDF名称需要根据需求变化，这行代码是取出html页面中传递来的字符串

本篇main.js导出的PDF大小与网页部分大小一致，不会出现网页部分较大时，内容被压缩的情况

这个方案的原理是，截取所选div块内的内容，绘制成图片，再保存为PDF文件.