Javascript将HTML 页面生成 PDF 并下载

作者:linwalker

https://segmentfault.com/a/1190000009211079

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

项目源码地址:https://github.com/linwalker/render-html-to-pdf

html2canvas简介

我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行“截图”。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。

使用

使用的API也很简洁,下面代码可以将某个元素渲染成canvas:

通过onrendered方法,可以将生成的canvas进行回调,比如插入到页面中:

做个小例子(demo1)代码如下:

这个例子将页面body中的元素渲染成canvas,并插入到body中。

jsPDF

jsPDF库可以用于浏览器端生成PDF。

文字生成PDF

使用方法如下:

图片生成PDF

使用方法如下:

文字与图片生成PDF

生成pdf需要把转化的元素添加到jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。

html2canvas + jsPDF

单页

将demo1的例子修改下:

如果页面内容根据a4比例转化后高度超过a4纸高度呢,生成的pdf会怎么样?会分页吗?

你可以试试,验证一下自己的想法。

jsPDF提供了一个很有用的API,,我们可以通过,来添加一页pdf,然后通过,将图片赋予这页pdf来显示。

那么我们如何确定哪里分页?

这个问题好回答,我们可以设置一个,超过这个高度的内容放入下一页pdf。

来捋一下思路,将html页面内容生成canvas图片,通过将第一页图片添加到pdf中,超过一页内容,通过添加pdf页数,然后再通过将下一页图片添加到pdf中。

嗯~,很好!巴特,难道没有发现问题吗?

这个方法实现的前提是 — — 我们能根据先将整页内容生成的canvas图片分割成对应的小图片,然后一个萝卜一个坑,一页一页进去。

What? 想一想我们的canvas是肿么来的,不用拉上去,直接看下面:

这里的就是要生成canvas的元素对象,一个元素生成一个canvas;那么我们需要一页一页的canvas,也就是说。。。

你觉得可能吗? 我觉得不太现实,按这思路要获取页面上不同位置的DOM元素,然后通过来处理,先不说能不能刚好在每个的位置刚好找到一个DOM元素,就算找到了,这样做累不累。

累的话 :)可以看看下面这种方法。

多页

我提供的思路是我们只生成一个canvas,对就一个,转化元素就是你要转成pdf内容的母元素,在这篇demo里就是了;其他不变,也是超过一页内容就,然后,只不过这里添加的是同一个canvas。

当然这样做只会出现多页重复的pdf,那到底怎么实现正确分页显示。其实主要利用了jsPDF的两点:

超过jsPDF实例格式尺寸的内容不显示( demo中就是a4纸的尺寸)

addImage有两个参数可以控制图片在pdf中的位置

虽然每一页pdf上显示的图片是相同的,但我们通过调整图片的位置,产生了分页的错觉。以第二页为例,将竖直方向上的偏移设置为即一张a4纸的高度,又因为超过a4纸高度范围的图片不显示,所以第二页显示了图片竖直方向上[841.89,1682.78]范围内的内容,这就得到了分页的效果,以此类推。

还是看代码吧:

两边留边距

修改imgWidth,并且在addImage时x方向参数设置你要的边距,具体代码如下:

【关于投稿】

如果大家有原创好文投稿,请直接给公号发送留言。

① 留言格式:

【投稿】+《 文章标题》+ 文章链接

② 示例:

【投稿】《不要自称是程序员,我十多年的 IT 职场总结》:http://blog.jobbole.com/94148/

③ 最后请附上您的个人简介哈~

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180713B1K9XJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券