JS 使用js库将网页导出为PDF(仅限一页A4)

该方法实际应用的方式是通过html2canvas把页面转为图片，再通过jspdf生成PDF文档。不过远程的方式通过这两个JS生成的清晰度不高，所以使用的方法为通过这两个JS开发的另一个JS类库。

html2pdf

一、引入JS

    <script src="http://cs.lifeiai.com:88/aa/jquery-git.js"></script>
    <script src="http://cs.lifeiai.com:88/aa/html2pdf.bundle.js" charset="utf-8"></script>

二、设置点击事件元素

 <div class="footer-main"><a href="javascript:test()" onclick="test()">导出PDF</a></div>

三、设置JS的函数方法

  <script>
      function test() {
          // 获取指定ID的Element
          var element = document.getElementById('enlb-body-div');
          // 生成PDF，并设置对应的参数
          html2pdf().from(element).set({
          margin: 0.5, //PDF文档的内容距离边缘的距离，目前看着只左右编剧
          filename: 'test.pdf',  //文档的名称
          html2canvas: { scale: 2 },  //这个可能疑似截图清晰度（放大倍数）
          //一些相关的设置，不了解具体含义
          //  orientation   纸张方向  portrait 纵向
          //  format  格式
          //  unit  像素单位
          //  compressPDF  是否压缩  true 、false
          jsPDF: {orientation: 'portrait', unit: 'in', format: 'letter', compressPDF: true}
        }).save();
      }
    </script>

上述代码中有些元素决定了边距和像素单位，页启动清晰度的问题，具体请自行分析。

四、示例代码

aa_Metj6j.tar.gz

五、JS包

jsPDF-master.zip

html2pdf.js-master.zip

html2canvas.zip

 您阅读本篇文章共花了：