【解决】jsPDF之长图片生成PDF（分页，失真）

为了减轻后端压力，尽量在前端页面实现，同时减轻服务器负载。
上接：http://blog.csdn.net/zt_fucker/article/details/76583032

---

版本：jsPDF.js 1.3.2

在获取到页面截取的base64位的长长图片之后，添加到pdf中。

        $("#downpdf").on("click", function() {
            //获取节点高度，后面为克隆节点设置高度。
            var height = $(TargetNode).height()
            //克隆节点，默认为false，不复制方法属性，为true是全部复制。
            var cloneDom = $(TargetNode).clone(true);
            //设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
            cloneDom.css({
                "background-color": "white",
                "position": "absolute",
                "top": "0px",
                "z-index": "-1",
                "height": height
            });
            //将克隆节点动态追加到body后面。
            $("body").append(cloneDom);
            //插件生成base64img图片。
            html2canvas(cloneDom, {
                //Whether to allow cross-origin images to taint the canvas
                allowTaint: true,
                //Whether to test each image if it taints the canvas before drawing them
                taintTest: false,
                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) {
                            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                            pdf.addImage(pageData, 'JPEG', 0, position,imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if(leftHeight > 0) {
                                //注②
                                pdf.addPage();
                            }
                        }
                    }

                    pdf.save('name_hos.pdf');
                }
            });
        })

注①new jsPDF(orientation, unit, format) → {jsPDF}

Name	Description
orientation	One of “portrait” or “landscape” (or shortcuts “p” (Default), “l”)
unit	Measurement unit to be used when coordinates are specified. One of “pt” (points), “mm” (Default), “cm”, “in”
format	One of ‘pageFormats’ as shown below, default: a4

.

注②addPage() → {jsPDF}

  /**
     * Adds (and transfers the focus to) new page to the PDF document.
     * @function
     * @returns {jsPDF}
     *
     * @methodOf jsPDF#
     * @name addPage
     */
    API.addPage = function() {
      _addPage.apply(this, arguments);
      return this;
    };

注③各种型号纸张大小

 pageFormats = { // Size in pt of various paper formats
      'a0': [2383.94, 3370.39],
      'a1': [1683.78, 2383.94],
      'a2': [1190.55, 1683.78],
      'a3': [841.89, 1190.55],
      'a4': [595.28, 841.89],
      'a5': [419.53, 595.28],
      'a6': [297.64, 419.53],
      'a7': [209.76, 297.64],
      'a8': [147.40, 209.76],
      'a9': [104.88, 147.40],
      'a10': [73.70, 104.88],
      'b0': [2834.65, 4008.19],
      'b1': [2004.09, 2834.65],
      'b2': [1417.32, 2004.09],
      'b3': [1000.63, 1417.32],
      'b4': [708.66, 1000.63],
      'b5': [498.90, 708.66],
      'b6': [354.33, 498.90],
      'b7': [249.45, 354.33],
      'b8': [175.75, 249.45],
      'b9': [124.72, 175.75],
      'b10': [87.87, 124.72],
      'c0': [2599.37, 3676.54],
      'c1': [1836.85, 2599.37],
      'c2': [1298.27, 1836.85],
      'c3': [918.43, 1298.27],
      'c4': [649.13, 918.43],
      'c5': [459.21, 649.13],
      'c6': [323.15, 459.21],
      'c7': [229.61, 323.15],
      'c8': [161.57, 229.61],
      'c9': [113.39, 161.57],
      'c10': [79.37, 113.39],
      'dl': [311.81, 623.62],
      'letter': [612, 792],
      'government-letter': [576, 756],
      'legal': [612, 1008],
      'junior-legal': [576, 360],
      'ledger': [1224, 792],
      'tabloid': [792, 1224],
      'credit-card': [153, 243]
    };

更多JSPDF示例demo请点击：https://segmentfault.com/a/1190000009211079