html導出pdf

 需要引入html2canvas.js和jsPdf.debug.js，

content寬高最好固定，否則截圖時會出現不可預期的情況，

這個是截取長頁面，導出每頁寬高爲1920*900的pdf，

兩個js文件都需要修改源碼中的一些東西，不然會導致無法導出遠程圖片

function ImageContainer(src, cors) {
    this.src = src;
    this.image = new Image();
    var self = this;
    this.tainted = null;
    this.promise = new Promise(function(resolve, reject) {
        self.image.onload = resolve;
        self.image.onerror = reject;
        if (cors) {
//修改這句            self.image.crossOrigin = "anonymous";
            self.image.crossOrigin = "";
        }
//修改這句        self.image.src = src;
        self.image.src = src+"?"+new Date().getTime();
        if (self.image.complete === true) {
            resolve(self.image);
        }
    });
}

已知谷歌瀏覽器32位會出現最大截取高度33000px的問題，超出後會出現js報錯，最好使用64位瀏覽器。

    <button id="renderPdf">DOWNLOAD PDF</button>        
    <script type="text/javascript" src="js/html2canvas.js"></script>
	    <script type="text/javascript" src="js/jsPdf.debug.js"></script>
	    <script type="text/javascript">

      var downPdf = document.getElementById("renderPdf");

      downPdf.onclick = function() {
          html2canvas($('#content'), {
              useCORS: true,
              onrendered:function(canvas) {
                  var contentWidth = canvas.width;
                  var contentHeight = canvas.height;

                  //一頁pdf顯示html頁面生成的canvas高度;
                  var pageHeight = contentWidth / 1920 * <?php echo $height;?>;
                  //未生成pdf的html頁面高度
                  var leftHeight = contentHeight;
                  var onepageheight = contentHeight/2;//每一頁的高度
                  //pdf頁面偏移
                  var position = 0;
                  //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高

                  var imgWidth = 1920;
                  var imgHeight =1 * contentHeight;

                  var pageData = canvas.toDataURL('image/jpeg', 0.5);
                  var pdf = new jsPDF('landscape','px',[1920, <?php echo $height;?>])
                  //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                  //當內容未超過pdf一頁顯示的範圍，無需分頁
                  if (leftHeight <= <?php echo $height;?>) {
                      pdf.addImage(pageData, 'JPEG', 0, 0, 1920, <?php echo $height;?> );
                  } else {
                      while(leftHeight > 0) {
                          pdf.addImage(pageData, 'JPEG', 0, position, 1920, imgHeight)
                          leftHeight -= <?php echo $height;?>;
                          position -= <?php echo $height;?>;
                          //避免添加空白頁
                          if(leftHeight > 0) {
                              pdf.addPage();
                          }
                      }
                  }

                  pdf.save('content.pdf');
              }
          })
      }
    </script>