将HTML 转为pdf

将HTML 转为pdf

---

项目中有需求把 html页面显示转为pdf, 于是找了个例子，具有可行性的是这个
JS 如何将 HTML 页面导出为 PDF 该博主给了方法，使用了 html2canvas 和 jspdf 两个js 库来操作的，两个库的github地址分别是
1. https://github.com/niklasvh/html2canvas
2. https://github.com/MrRio/jsPDF

博主核心方法：

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

    html2canvas(document.getElementById("content"), {
        onrendered: function(canvas) {

            //通过html2canvas将html渲染成canvas，然后获取图片数据
            var imgData = canvas.toDataURL('image/jpeg');

            //初始化pdf，设置相应格式
            var doc = new jsPDF("p", "mm", "a4");

            //这里设置的是a4纸张尺寸
            doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            //输出保存命名为content的pdf
            doc.save('content.pdf');
        }
    });

}

本人在实际中使用发现无法实现功能，继续翻了github 该项目文档，发现写法已经变了，原来是和博主使用的版本不一致导致的：
github上

1. html2canvas 官方例子：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

1. jspdf 官方例子：

//Then you're ready to start making your document:

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

//If you want to change the paper size, orientation, or units, you can do:

// Landscape export, 2×4 inches
var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
})

doc.text('Hello world!', 1, 1)
doc.save('two-by-four.pdf')

于是本人改进了方法如下：

html2canvas(document.getElementById("content")).then(function(canvas){
            var imgData = canvas.toDataURL('image/jpeg');
            //初始化pdf，设置相应格式
            var doc = new jsPDF("p", "mm", "a4");

            //这里设置的是a4纸张尺寸
            doc.addImage(imgData, 'JPEG', 0, 0,210,297);

            //输出保存命名为content的pdf
            doc.save('content.pdf');
        });

这里只改变了html2canvas 的方法就生效了。