将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上
- html2canvas 官方例子:
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
- 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 的方法就生效了。