关于jsPDF的分页、实际宽度高度、中文乱码、IE兼容、domToImage、html2canvas记录填坑

最近接手了一个web项目改造，对弹窗进行导出PDF，而且弹窗可能还会有滚动。

要求原样导出，一开始就没考虑后台导出太傻，JS这么强大。

jsPDF符合要求，官网：https://parall.ax/products/jspdf，有几个sample还可以。

以下是几个主要方法和槽点

addHtml：支持dom的导出PDF，不过分辨率差很多很失真且不支持自动分页只会截取当页显示内容，应该是内部使用html2canvas方法转换图片的坑。

fromHtml：支持长页面的自动分页，不过不支持中文，去jsPdf在github相关issues，有提示说要自己添加字体ttf,

addImage: 添加图片自己定义，最后采用这个

但是div生成图片也有两种方法， html2canvas，domtoimage

html2canvas只转换显示当前也内容，需手动添加页面，对于一个div长页面不太好处理

domtoimage,可以截取超长页面，不过是采用的es6语法，在传统web项目中IE（坑）浏览器不兼容。

以上记录研究历程，下面上主要代码

<script src="${request.getContextPath()}/js/polyfill.js"></script>//可以使用es6语法
<script src="${request.getContextPath()}/js/bluebird.js"></script>//浏览器可以支持promise，ie有报错
<script src="${request.getContextPath()}/js/framework/dom-to-image.js"></script>
<script src="${request.getContextPath()}/js/html2canvas.js"></script>
<script src="${request.getContextPath()}/js/jspdf.debug.js"></script>

主要方法，为了兼容ie,

        /*滚动条内容，全部展开,如不展开只截取显示*/
        $("#nodeText-frm").css("overflow","visible");
        $("#nodeText-frm").css("height","auto");
        $("#modal-body").css("position","relative");
        var sHeight = $("#nodeText-frm").height();

        var print_content = $('#pdf1');
        var height = $(print_content).height();
        var width = $(print_content).width();

        if(height<sHeight){
            height = sHeight+20;
            $('#pdf1').height(height+20);
        }
        var node = document.getElementById('pdf1');//必须这样获取dom,采用jquery获取在domtoimage中报错
        /*PDF 方向，l横排，p竖排，此处关键，当宽度大于高度采用横排显示，这样可以显示实际大小*/
        var orientation = "p";
        if(width>height){
            orientation = "l";
        }
        var pdf = new jsPDF(orientation, 'px', [width,height]);
        var explorer =navigator.userAgent;//此处略LOW
        if(explorer.indexOf("MSIE") >= 0){
            html2canvas(node, {
                onrendered: function(canvas) {
                    var url = canvas.toDataURL();//图片地址
                    pdf.addImage(url, 'PNG', 0, 0,width,height);
                    pdf.save(filename);//此处有坑，超过一页显示不全
                },
                width: width,
                height: height
            });
            
        }else {
            domtoimage.toPng(node)
                .then(function (dataUrl) {
                    /*图片下载,还有很多api*/
                    /*var link = document.createElement('a');
                     link.download = 'my-image-name.png';
                     link.href = dataUrl;
                     link.click();*/

                    pdf.addImage(dataUrl, 'PNG', 0, 0,width,height);
                    pdf.save(filename);
                });
        }