将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 的方法就生效了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值