加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

jsPDF基于HTML5的强大PDF生成工具

(2020-03-09 15:13:33)
标签:

jspdf

jspdf:jquery把Html生成PDF文件的工具;
实例:
    var target document.getElementsById("id");
    target.style.background "#FFFFFF";
 
    html2canvas(target, {
      onrendered:function(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 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");
          // 转base64
        var datauri pdf.output('dataurlstring')
          var base64 datauri.substring(28);
        console.log(base64)
 
      }
    })
 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有