vue中npm install jspdf --save报错怎么解决_npm install --save jspdf

由于项目需求，需要将html界面的报表转换成pdf输出下载。网上荡了很久，最终用的html2canvas和jspdf实现需求。
总结了下基本都是利用canvas将页面模块画成图片在转化为PDF文件。
自己实现过程中遇到一点小坑。在此将整个过程记录下来。
第一步：安装html2canvas和jspdf依赖

npm install html2canvas --save

1
2

上面一步只是安装了canvas画图工具的依赖，接着就是第一个坑了。
不知道你又没有跟我一样试了无数次的以下命令去安装jsPDF依赖
npm install jspdf --save
cnpm install jspdf --save
不管是npm,还是cnpm,结果都是：

npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/eligrey/FileSaver.js.git
npm ERR! enoent 
npm ERR! enoent 
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     E:\Program Files\nodejs\node_cache\_logs\2019-11-22T07_39_30_903Z-debug.log
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面是说，在刚开始下载资源的时候找不到对应文件。
我果断抛弃 npm install jspdf --save方式引入依赖
话不多说,cdn方式引入jspdf如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
1

第二步 封装页面保存为PDF的全局函数
1.随便建立个js文件,代码如下[注：cpbg是页面中div的ID]

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
//import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = "高新技术企业认定测评报告";
      html2Canvas(document.querySelector('#cpbg'), {
        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 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(title + '.pdf')
      }
      )
    }
  }
}

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

2.main.js中引入上面那个JS文件

import htmlToPdf from './components/heightTest/htmlToPdf'//页面转PDF
Vue.use(htmlToPdf)

1
2
3

第三步：组件中调用getPdf()即可使用

<el-button @click="getPdf()">保存为PDF</el-button>

1
2

本以为没毛病了，然而现实是残酷的。

在我们写的getPdf()函数中找不到JsPDF方法
精准而优雅，我打开下面链接查看源码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

1
2

发现了什么，JsPDF的J竟然是小写。（不能仅仅copy，也需要检查的，不过嘛，我是面向CV编程滴。）

就此结束啦。
温馨提示：
1、图片需要是base64格式的；
2、注意引入的pdf.js中的pdfjs方法名称大小写；
3、cdn引入的<script>这里直接在vue界面引入。