关于导出pdf的注意点

参考文档:https://github.com/linwalker/render-html-to-pdf(beautifulgirlzp已经fork了)

利用的是jspdf.debug.js和html2canvas.js两个文件实现的html转换为pdf文档

当如果不想转换整个document.body的时候可以选择某盒子
eg:

html2canvas(document.getElementById('zbox'), {})
此时导出的pdf背景可能是黑色的,需要将盒子的设置一下background-color:#fff

导出一般是a4纸张大小的pdf,一般可能会失真,用方法:

html2canvas(document.body, {
        onrendered:function(canvas) {

            //返回图片dataURL，参数：图片格式和清晰度(0-1)
            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
            var pdf = new jsPDF('', 'pt', 'a4');

            //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
            pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );

            pdf.save('stone.pdf');

        }
    })

下面是导出的分页的pdf:

html2canvas(document.getElementById('zbox'), {
        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');
        }
    })

其实很简单的,只需要会用别人的方法就行