2021-09-27

最新推荐文章于 2024-08-12 17:16:43 发布

N_ora

最新推荐文章于 2024-08-12 17:16:43 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_33359745/article/details/120504612

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客记录了在Vue项目中使用html2canvas和jsPDF生成PDF时遇到的安装和打印问题。安装部分主要涉及npm安装jsPDF插件的错误、cdn引入jsPDF找不到对象以及引入资源类型不匹配的问题，通过cdn引入并调整资源解决了问题。打印部分，滚动内容无法完整打印，通过复制DOM并调整样式实现了完整打印，但样式缩放导致问题。博客提供了解决方案，并指出滚动内容大量时可能存在的问题。

摘要由CSDN通过智能技术生成

vue 使用html2canvas + jsPDF 生成pdf 踩坑记录

问题记录

问题记录

安装部分

问题

1.使用npm安装jsPDF插件，安装后，报错。
报错内容:

export 'SVGPathData' (imported as 'SVGPathData') was not found in 'svg-pathdata' (possible ...

解决方法：
不采用npm安装的模式，通过cdn引入jsPDF

2.使用cdn引用报错：
报错内容：找不到 jsPDF对象
解决方法：

// 解决找不到jsPDF对象问题
window.jsPDF = window.jspdf.jsPDF;
// 在生成pdf功能中使用window.jsPDF

3.引入cdn中引入的资源不同导致报错：
报错内容：

JS错误： Cannot use import statement outside a module

解决方法：
引入正确的资源，如果引入es或者其他类型会报错。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>

打印部分

问题

1.打印含有滚动的内容存在问题。
找了几天资料，没找到可以解决的。
后面使用了下面的方式，把要打印的dom元素复制一份，添加到body，然后宽度设置为打印dom的完整高度，设置层级不展示在视图中，就可以打印完整的页面了，但是发现打印的样式整体缩小了。
另外，对于很多很多数据的没有测试过，不知道会不会有问题。
因为现在改成从后台下载模板了。暂时先放下这个问题，看什么时候有空再研究下。头秃.jpg

// 导出页面为PDF格式
// 使用 getPdf(title,id="#abc")
// import html2Canvas from 'html2canvas'
Vue.prototype.getPdf = function (pdfTitle="下载资料",id="#printDiv") {
      // 存在问题：滚动的部分不打印。
      //----添加下面代码后，滚动的可以打印，但是页面缩小了，样式变小了。
      let cloneNode = document.querySelector(id).cloneNode(true);
      cloneNode.style.backgroundColor = "white";
      cloneNode.style.position = "absolute";
      cloneNode.style.top = "0px";
      cloneNode.style.zIndex = "-9999";
      cloneNode.height = document.querySelector(id).scrollHeight+'px';
      document.body.append(cloneNode);
       //----添加下面代码后，滚动的可以打印，但是页面缩小了，样式变小了。	
       // 以下代码为网上搜索的代码。
      html2Canvas(cloneNode, {
        allowTaint: true,
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new window.jsPDF('', 'pt', 'a4')
        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(pdfTitle + '.pdf')
      }
      )

遇到的问题主要在安装部分。找到解决方法之后觉得很简单，但是在解决之前还是觉得很头大的，而且之前没有用过这些插件，网上搜到的类似的问题比较少，所以花的时间有点多。希望能够给一些遇到相同问题的朋友们一点点小帮助。
至于滚动部分不截屏的，嗯，慢慢来吧。