JS保存指定盒子为PDF，只生成屏幕显示的部分（神坑）

2019-12-20 本文已影响0人南台观芸秀

问题描述：

网上很多讲述如何用JS保存pdf的demo太多了自己网上搜，我就不PI啰嗦了；我现在要讲的问题是，在生成目标盒子内容很高的情况下（盒子中的内容很长的那种，屏幕都不够装），按demo上的使用方法将代码准备好后，执行下载，就出现了怎么玩弄都去不掉的【黑块】。

引入两个PSD必要文件：

html2canvas.js
jspdf.debug.js

<button id="renderPdf">DOWNLOAD PDF</button>

var downPdf = document.getElementById("renderPdf");
        downPdf.onclick = function(){
            var dom=document.getElementById("content");
            dom.style.backgroundColor="#fff";
            html2canvas(dom, {
                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;
                      //pdf页面偏移
                      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', 20, 0, imgWidth, imgHeight);
                      } else {
                          while(leftHeight > 0) {
                              pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                              leftHeight -= pageHeight;
                              position -= 841.89;
                              //避免添加空白页
                              if(leftHeight > 0) {
                                  pdf.addPage();
                              }
                          }
                    }
                    pdf.save('content.pdf');
                }
            })
        }

实例：