将html页面转换成PDF供用户下载到桌面

其实这是一个挺鸡肋的方法，所以做起来资料不是很多，但是谁让总有不会打印网页的人呢。

本次采用纯js方法，自己写了一个js方法，再利用官方的两个js库，就可以轻松实现了。

document.getElementById("btn-html2canvas").onclick = function(){

    // 将 id 为 content 的 div 渲染成 canvas
    html2canvas(document.getElementById("content"), {

        // 渲染完成时调用，获得 canvas
        onrendered: function(canvas) {

            // 从 canvas 提取图片数据
            var imgData = canvas.toDataURL('image/jpeg');

            //var doc = new jsPDF("p", "mm", "a4");
            /*if (this.width > this.height) {
                    var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
                } else {
                    var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
                }*/
            var canWidth = canvas.width;
            var canHeight = canvas.height;

            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = canWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = canHeight;
            //pdf页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28 / canWidth * canHeight;
            //l:横向， p：纵向
            // var doc = new jsPDF("p", "mm", "a4");
            var doc = new jsPDF("p", "pt", "a4");
            //                               |
            // |—————————————————————————————|                     
            // A0 841×1189                           
            // A1 594×841                            
            // A2 420×594                            
            // A3 297×420                            
            // A4 210×297                            
            // A5 148×210                            
            // A6 105×148                            
            // A7 74×105                             
            // A8 52×74                              
            // A9 37×52                              
            // A10 26×37             
            //     |——|———————————————————————————|
            //                                 |——|——|
            //                                 |     |      
            /*doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            doc.save('content.pdf');*/
            //var doc = new jsPDF('', 'in', [(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//设置PDF宽高为要显示的元素的宽高，将像素转化为英寸

            //doc.addImage(imgData, 'JPEG', 0, 0,0,0);
            //doc.addImage(imgData, 'JPEG', 0, 0,dpiX,dpiY);
            if (leftHeight < pageHeight) {
                doc.addImage(imgData, 'JPEG', 30, 50, imgWidth*1.5, imgHeight*1.5);
            } else {
                while (leftHeight > 0) {
                    doc.addImage(pageData, 'JPEG', 30, position+50, imgWidth*1.5, imgHeight*1.5);
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 0) {
                        doc.addPage();
                    };
                };
            }
            doc.save('content.pdf');
        },
        background: "#fff"
    });

}

这里的image的长和宽需要根据页面自己调节。

这几个是官方做好的js

最后在需要打印的页面，将需要打印的内容用 

给括起来。

还有一个需要注意的小地方

document.getElementById("btn-html2canvas")

这里的id值要和页面上下载按钮的id值改成一样的名字。

我觉得这些蛮有意思的，但不知道可以写到什么时候，毕竟有些时候自己是做不了自己的主的。