Vue中使用jspdf转为pdf并文件下载（附：解决文件中文乱码

有某些场景，比如说页面有一个下载按钮，点击了下载按钮之后，会下载一个pdf文件。

这时候就需要用到jspdf这个库

使用方法：

1.下载依赖包

npm install jspdf --save

2.项目中引入

import JsPDF from 'jspdf'

3.进入场景 绘制一个下载按钮，定义点击事件方法

<button @click="generatePdf()">下载 PDF</button>

方法内部

generatePdf() {
      //实例化Jspdf
      const pdfDoc = new JsPDF()
      console.log(pdfDoc);
      //解决乱码方法
      // addFileToVFS方法添加字体文件,后面的字体是base64
      pdfDoc.addFileToVFS('blobs', addBase64())
      // 添加字体，字体名，格式
      pdfDoc.addFont('blobs', 'font_blobs', 'normal')
      // 通过字体名使用字体
      pdfDoc.setFont('font_blobs')
      // text() 方法在指定坐标点上添加文本
      pdfDoc.text("目录", 100, 10)
      pdfDoc.save('demo.pdf')

 save方法就是jspdf的内置方法，设置下载文件的名字并提交下载

addBase6是我们引入字体封装的方法

其中涉及到一个字体库引入（不引入的话jspdf生成下载的文件就会乱码

github中搜索jspdf，clone或者下载zip文件，下载之后找到 ’fontconverter‘ 打开 里面有一个'fontconverter.html'，在浏览器中运行

打开之后就是这个样子，选择你的字体文件(xx.ttf) 然后点击Create会自动下载一个依赖你上传的字体文件的js，将这个js拖动到你的项目中使用。

3.1 js文件方法内部如何使用？

转为js的文件 放入文件中（我的是assets/font/font.js),还需要做出修改导出它

将他定义成一个方法，原js文件只需要保留引号内的字节，然后通过导出函数包括 return

import {addBase64} from '@/assets/font/fonts.js'

然后再项目中引入 回到第 3 步的方法内部中，可以看到我们使用了这个字体并定义了字体格式

然后我们打开浏览器，点击下载再查看文件打开文件方法中定义的目录中文生效了