哇,这个,我找了好长时间。。纠结了快两天还没好。。
做了一个轮播图。想把这个轮播图一页一页都转成pdf的格式。。。在网上找了好长时间,,才明白一点点,
思路:轮播图。因为我是使用的轮播图写的。一个轮播页面上是一个组件,所以只要把每个组件都打印出来就好。但是这样有问题。后面再说。(会导出好几张pdf。没有办法把这几张合成一张。
1、用npm下载html2canvas和jspdf
npm install --save html2canvas jspdf
2、在html中你想把那一部分打印出来的那个div上加一个ref='xxx'(后来用着方便)
3、在要使用的组件中引入html2canvas和jspdf
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
4、然后就是分单页生成pdf和分页生成pdf(本来我以为分页就是可以直接解决我的这个轮播的问题,后来看明白了,根本不是。
分页是指如果你当前的页面高度太高,大于了画布的高度,他就会再另起一页。。唉。。。和我想的不一样)
(定义一个方法,写在这个方法里面 getPdf())
单页:
html2canvas(this.$refs.aaa).then(canvas => {
// 三个参数,第一个方向,第二个尺寸,第三个尺寸格式
var doc = new jsPDF("l", "pt", "a4")
// 将图片转化为dataUrl
var imageData = canvas.toDataURL("image/jpeg", 1.0);
//设置字体大小
doc.setFontSize(20);
//10,20这两参数控制文字距离左边,与上边的距离
doc.text('', 841.89, 595.28);
// 0, 40, 控制文字距离左边,与上边的距离
doc.addImage(imageData, 'PNG', 0, 0, 841.89, 595.28);
doc.save('成长档案.pdf')
// console.log(canvas.toDataURL())
});
多页:其实这些在网上能找到。。
html2canvas(document.body, {
onrendered:function(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');//生成的pdf的名字
}
})
对了对了,,,我写这个主要是为了记怎么获取生成的pdf的路径:直接打印canvas.toDataURL()就能获取到。。可能我太笨。哈哈哈。反正先记下来。。
参考网址:
https://github.com/linwalker/render-html-to-pdf (他写的很细致。。很明了。我都能看的明白,。哈哈哈)
(这个里面可能会报错,原因是onrendered这种方法已经不能用了,,改成then,具体修改请看我另一篇。)
https://blog.csdn.net/qq_42809973/article/details/86065316
到现在还在纠结怎么点击“生成pdf的时候把这几页的pdf合成一个pdf,可以翻页的那种,,如果有哪位大佬知道了。麻烦说一下”