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

最新推荐文章于 2024-09-26 11:32:21 发布

Mr.怪兽

最新推荐文章于 2024-09-26 11:32:21 发布

阅读量3.9k

点赞数 1

文章标签：前端 javascript es6 vue Powered by 金山文档

本文链接：https://blog.csdn.net/superherooooss/article/details/128904336

版权

文章介绍了如何使用jsPDF库在浏览器端生成PDF文件，并针对出现的中文乱码问题进行了详细解决步骤。首先，通过npm安装jspdf依赖。然后，创建一个简单的PDF导出示例。当发现文字显示为乱码时，作者提供了从Gitee下载jsPDF源码和ttf字体包，通过fontconverter.html页面转换字体为js文件，再将转换后的字体文件添加到jsPDF中，从而成功解决乱码，使PDF能正确显示中文。

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

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。