一篇文章介绍前端PDF导出方案以及乱码问题解决

1.安装依赖

PDF导出需要使用 jspdf 这个依赖，所以需要先下载依赖

npm i jspdf --save

2.案例创建

创建一个最基本的pdf导出demo

<template>
  <h1>jsPDF库,浏览器端生成PDF文档</h1>
</template>
​
<script setup>
// import { ref, onMounted, computed } from 'vue'
import JsPDF from 'jspdf';
​
// 创建一个对象
const pdfDoc = new JsPDF()
console.log(pdfDoc);
​
pdfDoc.text("欢迎使用jsPDF技术下载导出pdf文件", 66, 88)
pdfDoc.save('pdf导出文件.pdf')
</script>
​
<style>
</style>

​

浏览器界面如图所示：

打开导出的pdf文件可以发现原先应显示的文字 “欢迎使用jsPDF技术下载导出pdf文件”，结果显示成乱码。

3.解决乱码问题

在gitee上克隆jsPDF代码https://gitee.com/comwilla/jsPDF?_from=gitee_search 并解压为jsPDF-master文件夹。

下载ttf字体包 https://gitee.com/yanglilong127/ttf_to_json_and_js_file?_from=gitee_search 并解压。

打开jsPDF-master中的fontconverter.html页面。

选择文件夹，把下载好的字体文件上传。点击create下载js文件。表单中的其他内容不需要更改。

赋值方正舒体font 后面的这一大段字符串。

创建一个新的font.js ，将复制的font内容粘贴到font.js中。

在主程序中引入解决乱码部分，最新的代码如下。

<template>
  <h1>jsPDF库,浏览器端生成PDF文档</h1>
</template>
​
<script setup>
// import { ref, onMounted, computed } from 'vue'
import JsPDF from 'jspdf';
import { addFontBase64 } from '@/assets/font/font.js'
​
// 创建一个对象
const pdfDoc = new JsPDF()
console.log(pdfDoc);
​
//解决乱码方法
// addFileToVFS方法添加字体文件,后面的字体是base64
pdfDoc.addFileToVFS('blobs', addFontBase64())
// 添加字体，字体名，格式
pdfDoc.addFont('blobs', 'font_blobs', 'normal')
// 通过字体名使用字体
pdfDoc.setFont('font_blobs')
// text() 方法在指定坐标点上添加文本
pdfDoc.text("欢迎使用jsPDF技术下载导出pdf文件", 66, 88)
pdfDoc.save('pdf导出文件.pdf')
</script>
​
<style>
</style>

打开下载的pdf文件显示为正确的中文字体，大家可以根据个人的需求在网上下载不同的字体文件.ttf。