网页转pdf，html2canvas + jspdf 方案填坑

坑1：图片不显示

产生原因： 图片未开启跨域

解决办法： 升级版本 html2canvas v1.0.0-alpha.1 及以上，解决方案代码如下

var str = document.getElementById('#html2canvas');

html2canvas(str, {
    useCORS: true, // 设置 useCORS 为 true，即可开启图片跨域 
    onrendered: function (canvas) {
        var image = canvas.toDataURL("image/jpeg",1.0);
        window.open(image);
    }
});

坑2：清晰度

产生原因： html2canvas 默认dpi为 72，在高分屏上被放大2倍以上，导致图像失真

解决办法： 升级版本 html2canvas v1.0.0-alpha.1 及以上，解决方案代码如下

var str = document.getElementById('#html2canvas');

html2canvas(str, {
    scale: 2, // 设置 scale 为 2 及以上，即可支持高分屏 
    onrendered: function (canvas) {
        var image = canvas.toDataURL("image/jpeg",1.0);
        window.open(image);
    }
});

坑3：pdf 一片黑

产生原因： html2canvas 默认背景色为黑色

解决办法： 升级版本 html2canvas v1.0.0-alpha.1 及以上，解决方案代码如下

var str = document.getElementById('#html2canvas');

html2canvas(str, {
    background: '#FFFFFF', // 默认为黑色，将 background 为其他颜色
    onrendered: function (canvas) {
        var image = canvas.toDataURL("image/jpeg",1.0);
        window.open(image);
    }
});

坑2：长网页导出异常

产生原因： base64 超过 500k，后置字符将丢失

解决办法： 升级版本 html2canvas v1.0.0-alpha.1 及以上，将网页拆分成几部分，解决方案代码如下

    
    



    导出为PDF
    

        

            
1
        
        

            
2
        
        

            
3