React前端生成pdf文件

最新推荐文章于 2024-07-04 09:57:10 发布

qq_40315971

最新推荐文章于 2024-07-04 09:57:10 发布

阅读量1.7k

点赞数 1

文章标签： html2canvas jspdf PDF生成 DOM转换 canvas

本文链接：https://blog.csdn.net/qq_40315971/article/details/112638041

版权

使用到了使用html2canvas和jspdf

html2canvas是一个将Dom节点生成canvas的库，在这里主要用来生成canvas.

https://html2canvas.hertzen.com/

jspdf是一个生成pdf的开源库，可将图片等保存为pdf

http://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html

可以npm install安装相关的依赖或者在index.html里<head></head>加入以下两句

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

定义一个全局的函数fn

window.fn = function(id, name) { //id为dom节点的id,name为要导出的文件的名字
    var target = document.getElementById(id);
    target.style.background = "#FFFFFF"; //可以改变dom节点样式
    // target.style.marginLeft = '28px'
    // target.style.marginRight = '28px'
    // target.style.marginTop = '28px'
    html2canvas(target, {scale: 2, spi: 400}).then(function(canvas) {
    // document.body.appendChild(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 = 10;
         //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
         var imgWidth = 820.89;
         var imgHeight = 560.28;
         var pageData = canvas.toDataURL('image/jpeg', 1.0); 
    //toDataURL用来导出<canvas>元素上的图像

        //l纵向 p横向
        var pdf = new jsPDF('l', 'pt', 'a4');
 
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight);
        } else {    // 分页
            while(leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        pdf.save(`${name}.pdf`)
    });
  }

参考链接 https://www.jianshu.com/p/651c40d565e4

qq_40315971

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React前端生成pdf文件

使用到了使用html2canvas和jspdfhtml2canvas是一个将Dom节点生成canvas的库，在这里主要用来生成canvas.https://html2canvas.hertzen.com/jspdf是一个生成pdf的开源库，可将图片等保存为pdfhttp://raw.githack.com/MrRio/jsPDF/master/docs/module-addImage.html可以npm install安装相关的依赖或者在index.html里<head>&l
复制链接

扫一扫