jsPDF

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32042227/article/details/77503276

jsPDF总结

1 jsPDF的学习

1.1 学习的内容

jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了。

浏览器兼容性:

E 10(未测试), Firefox 3+(未测试), Safari 3+(未测试), Opera(未测试),

Chrome  60.0.3112.101(正式版本)(32 位)(已测试),360安全浏览器7(已测试),IE9(已测试,未能使用)

安装:

主要需要依赖三个库:

jsPDF.debug.js

html2canvas.js(调用jsPDF的addHTML()接口必须的js库)

jquery.js

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

因为jsPDF不支持中文,所以正常是把html页面先转成图片,再将图片转成PDF。有两种方式可以实现,第一种jsPDF提供了一个接口,可以调用html2canvas。第二种是先用html2canvas转成图片,再用jsPDF转成pdf。下面是具体实现方式:

第一种:

function toPDF() {

                            var pdf = new jsPDF('p', 'pt', 'a4');

                            pdf.internal.scaleFactor = 1;

                            var options = {

                                   pagesplit: true

                            };

                            var printhtml = $("#hhh").get(0);

                            pdf.addHTML(printhtml, options, function() {

                                   pdf.save('web1111.pdf');

                            });

                     }

第二种:

 

 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 = 595.28;

      var imgHeight = 592.28/contentWidth * contentHeight;

 

      var pageData = canvas.toDataURL('image/jpeg', 1.0);

 

      var pdf = new jsPDF('', 'pt', 'a4');

 

      //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)

      //当内容未超过pdf一页显示的范围,无需分页

      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('content.pdf');

  }

})

第二种方式实现效果比较好。

1.2 成果

1.3 遇到的问题和解决方法

1、经过fis编译后,无法使用该插件。

原因:未知

解决方法:暂无

 

展开阅读全文

没有更多推荐了,返回首页