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