vue项目中使用html2canvas转成pdf导出

哇，这个，我找了好长时间。。纠结了快两天还没好。。

做了一个轮播图。想把这个轮播图一页一页都转成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";

扫描二维码关注公众号，回复： 5099862 查看本文章

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，可以翻页的那种，，如果有哪位大佬知道了。麻烦说一下”

vue项目中使用html2canvas转成pdf导出

猜你喜欢