网页html转pdf在线制作,HTML转PDF

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

这周有一个需求，产品需要在后台系统预览一个网页图表信息，然后可以直接将这个图表下载成PDF保存到本地。这么骚的操作，之前还没有遇到，大概调研了一下。

在浏览器上直接打开网页，浏览器是支持将当前网页转成PDF下载的，右键->打印就可以了，但是不符合需求设定，需求是要在当前页面打开一个弹窗，然后下载弹窗里面展示的内容，而不是整个页面的内容，那就只能用其他办法了。发现有两个JS库可以支持这一操作的完成Html2canvas、jsPDF，思路是这样的，分两步。首先使用Html2canvas将html页面生成canvas快照，

再使用jsPDF将canvas转成PDF

下面就简单介绍一下详细步骤

Html2canvas

Html2canvas Html2canvas可以在浏览器中基于网页DOM生成屏幕快照，或者页面部分的快照，但不是100%精确。它是浏览器客户端界面生成的并不需要服务端的参与。

使用

html2canvas使用Promise构建，该函数返回一个包含canvas的promise。

1

2

3html2canvas(document.body).then(function(canvas) {

document.body.appendChild(canvas);

});

jsPDF

jsPDF 用于浏览器客户端生成PDF。可以将文字生成PDF，图片生成PDF

使用

将图片文字生成PDF。Demo示例

1

2

3

4

5

6

7var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRg....';

var doc = new jsPDF();

doc.setFontSize(40);

doc.text("Octocat loves jsPDF", 40, 30, 4);

doc.addImage(imgData, 10, 40, 180, 180);

HTML生成PDF

首先将jsPDF和html2canvas引入到项目，不管是引用js还是使用npm引入。引入完成之后，接下来我们可以使用了，先贴代码，然后再说坑再哪里。如下是使用html2canvas将网页中的内容生成canvas，然后使用jsPDF将canvas生成PDF，生成的canvas要是太长就会有分页的问题，下面是如果有分页就增加一个页面进行分页。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39window.html2canvas(document.getElementById('contentView')).then(function (canvas) {

console.log('下载中')

// document.body.appendChild(canvas)

var contentWidth = canvas.width

var contentHeight = canvas.height

// 一页pdf显示html页面生成的canvas高度;

var pageHeight = contentWidth / 592.28 * 841.89

// 未生成pdf的html页面高度

var leftHeight = contentHeight

// 页面偏移

var position = 0

// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

var imgWidth = 595.28

var imgHeight = 592.28 / contentWidth * contentHeight

var pageData = canvas.toDataURL('image/jpeg', 1.0)

var pdf = new jsPDF('', 'pt', 'a4')

// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

// 当内容未超过pdf一页显示的范围，无需分页

if (leftHeight < pageHeight) {

pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

} else {

while (leftHeight > 0) {

pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

leftHeight -= pageHeight

position -= 841.89

// 避免添加空白页

if (leftHeight > 0) {

pdf.addPage()

}

}

}

pdf.save('content.pdf')

})

注意

有坑的地方，刚开始不知道怎么回事，代码写的也正确，但生成canvas的时候，总是只能截取当前可视区域的位置，最后查了很多办法，看项目排查才发现，是因为项目中引入了其他的样式css，在body样式上添加了overflow:hidden;导致超出页面窗口的部分都被截掉了，当前页面是在内部设置的滚动，所以在抓取页面生成canvas的时候，能获取到页面高度只有窗口的高度，canvas在生成的时候也是只有可视区域那么大。所以，在使用的时候也要注意页面的高度，是不是真正撑起来的高度，canvas绘制时是根据页面的滚动区域scrollWidth和scrollHeight设置高度的。

参考链接

很详细的一篇教程 https://github.com/linwalker/render-html-to-pdf

https://github.com/niklasvh/html2canvas/issues/117