pdfmake中文乱码解决

最新推荐文章于 2024-09-09 15:57:41 发布

_云千_

最新推荐文章于 2024-09-09 15:57:41 发布

阅读量565

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/yun_qian/article/details/141650384

版权

pdfmake是什么

pdfmake是一个功能强大的库，能帮助开发者轻松创建结构化的PDF文件。它的设计目标是提供一个简单易用的API，让即使不熟悉PDF规范的开发者也能快速上手。该项目提供了丰富的排版特性，包括文本样式、列表、表格、图像以及自定义页面布局等。此外，它还支持在不同平台上的浏览器和Node.js环境中运行。

官方文档：https://pdfmake.github.io/docs/

为什么会出现中文乱码

因为官方默认字体只有英文
在这里插入图片描述

解决方法

官方文档提供了两种方法：

创建一个新的vfs_fonts.js，替换掉原来项目中的vfs_fonts.js
引用网络字体

第一种方法操作有点烦，可以参考这篇文章做一下pdfmake实现中文支持，解决中文乱码问题
第二种方法比较简单
环境：vue3+typescript
代码：

<script setup lang="ts">
import pdfFonts from 'pdfmake/build/vfs_fonts';
import pdfMake from 'pdfmake/build/pdfmake'

// 加载字体
(pdfMake as any).vfs = pdfFonts.pdfMake.vfs;

// 注册字体
 (pdfMake as any).fonts = {
     ...pdfMake.fonts,
     PingFang: {
        normal: 'https://example.com/fonts/fontFile.ttf',
     	bold: 'https://example.com/fonts/fontFile2.ttf',
     	italics: 'https://example.com/fonts/fontFile3.ttf',
     	bolditalics: 'https://example.com/fonts/fontFile4.ttf
     }
 };

const generatePdf = () => {
  const docDefinition = {
    content: [
    { text: '中文测试', style: 'header' },
    { text: 'EnglishTest', style: 'header' },
  ],
    defaultStyle: {
    // 在这里设置字体
    font: 'PingFang'
  },
    styles: {
      header: {
        fontSize: 18,
        bold: true,
        margin: [0, 0, 0, 10],
      },
    },
  };

  pdfMake.createPdf(docDefinition).open();
};
</script>

效果：
在这里插入图片描述