将HTML页面转换为PDF文件并导出

Airy 发布于2019-08-22 14:56 / 1975人阅读

摘要：目前，在大多数的管理系统中，都会有这样一个功能根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为文件。利用将新的元素生成图片利用将图片生成文件并保存到本地。

目前，在大多数的管理系统中，都会有这样一个功能：根据相关的条件查询相应的数据，并生成可视化报表，然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程，生成可视化的报表可使用Echarts，D3js等框架。

1.需要引入的文件

html2canvas.js（根据实际情况选择相应的版本）
jspdf.min.js（根据实际情况选择相应的版本）

2.实现思路

（1）在body中将需要生成PDF的HTML复制一份，切记：如果元素中含有ID，则必须重新给定
（2）将新的元素设置为position:absolute; 脱离文档流，因为处于文档流中被浏览器遮挡的部分不会生成PDF。
（3）利用html2canvas.js将新的元素生成图片
（4）利用jspdf.min.js将图片生成PDF文件并保存到本地。

3.实现代码

(1)HTML代码
 
/*将要生成PDF的HTML代码*/

………………………………
 

(2)JS代码

/*复制元素，注意ID*/
$("body").append("…………………………………………………………");
/*设置新元素样式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成图片，jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF("p", "pt", "a4");
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, "JPEG", 0, 0, 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("report_pdf_" + new Date().getTime() + ".pdf");
            $("#pdf1").remove();
        }
    },
})

以上为笔者在项目中的部分核心代码，如有问题，欢迎指正。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93007.html

vue导出html、word和pdf

摘要：导出的页面组件如下导出方法获取要导出的组件页面的把它设置成变量一文本并通过导出获取要导出组件页面的的标签代码，通过获取，也可以通过获得构造页面，并使用构造一个文件流并下载，如下具体代码如下的简历获取另外一种方式迅聘选才导出导出的页面组件如下： 1、导出html 方法：1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导...

malakashi 2019-08-23 10:31 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

Heier 2019-08-02 16:04 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

gekylin 2019-08-29 16:40 评论0 收藏0
前端实现html转pdf方法总结

摘要：比上面的稍微好点，支持了一些方面的东西，具体看这个中文配置参数评价这种方法前端实现，灵活简单，而且在页面还原上是很好的，生成的过程不需要自己操心，页面样式还可控，可以说是非常不错的。最近要搞前端html转pdf的功能。折腾了两天，略有所收，踩了一些坑，所以做些记录，为后来的兄弟做些提示，也算是回馈社区。经过一番调(sou)研(suo)发现html导出pdf一般有这几种方式，各有各有优...

yvonne 2019-08-23 11:51 评论0 收藏0