使用JS网页内容保存为PDF

标签：actor   根据   canvas   初始化   ntb   jquery   需求   document   任务   

一、使用插件

1.html2canvas.js

script引入：

2.jspdf.js

script引入：

二、编写HTML文件

<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/html2canvas.js"></script>
<script src="./js/jspdf.js"></script>
<script src="./js/exportpdf.js"></script>

<div>
    <span id="download">下载</span>
</div>
<div class="data-table" id="download-table">
   <table class="table table-hover">
      <thead>
         <tr>
            <td>项目员</td>
            <td>任务分值</td>
            <td>日志分值</td>
            <td>绩效分值</td>
            <td>绩效额度</td>
         </tr>
      </thead>
   </table>
</div>

三、编写js文件

文件名称：exportpdf.js

// 获取本页表格中最后一行是第几行（对不同高度的表格进行不同的处理）
var last_counts = $(‘#down-table:last‘).text();

//监听pdf导出按键

$(‘#download‘).click(function () {

    // 将 id 为 contents 的 div 渲染成 canvas
    html2canvas(document.getElementById("download-table"),{
        // 渲染完成时调用，获得 canvas
        onrendered: function(canvas) {

            // 从 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 = 555.28;
            var imgHeight = 555.28/contentWidth * contentHeight;

            var imgData = canvas.toDataURL(‘image/jpeg‘,1.0);

            //初始化pdf，设置相应格式（单位为pt,导出a4纸的大小）
            var doc = new jsPDF("p", "pt", "a4");
            doc.internal.scaleFactor = 1.33;

            if (leftHeight < pageHeight) {
                doc.addImage(imgData, ‘JPEG‘, 20, 20, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    doc.addImage(imgData, ‘JPEG‘, 20, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        doc.addPage();
                    }
                }
            }

            //输出保存命名为bill的pdf
            doc.save(‘bill.pdf‘);
        },
        // 导出的pdf默认背景颜色为黑色，所以要设置颜色为白（根据自己的需求设置）
        background: ‘#FFF‘
    })
});

使用JS网页内容保存为PDF

标签：actor   根据   canvas   初始化   ntb   jquery   需求   document   任务   

原文地址：https://www.cnblogs.com/nlbz/p/14900403.html