JS DataTable中导出PDF中文乱码

JS DataTable中导出PDF中文乱码

文章目录

    • JS DataTable中导出PDF中文乱码
          • 一. 问题
          • 二. 原因
          • 三. vfs_fonts.js
          • 四. pdfmake.js
          • 五. 解决
          • 六.参考资料

一. 问题

在这里插入图片描述

二. 原因

DataTable使用pdfmake,pdfmake默认字体为Roboto,不支持中文字体。添加自己的字体,需要引入对应的vfs_fonts.js文件,修改pdfmake.js。
(在我的项目中,对应datatable文件夹下的vfs_fonts.js和pdfmake.min.js,也有人是改三个文件,vfs_fonts.js,pdfmake.js和dataTable.buttons.min.js,思路对了就没问题)
主要思路依据:官网上对于添加字体的方法指导
前端页面的js内dataTable不需要改,PDF导出按钮由前端界面的JS文件中DataTable设置。
在这里插入图片描述

三. vfs_fonts.js

获取中文版的vfs_fonts.js主要有两种方法:自己生成和寻找资源。

  1. 自己生成vfs_fonts.js文件
    首先需要准备字体的ttf文件。官网上对于如何生成有以下三种方法:
    (1)安装pdfmake
    在这里插入图片描述
    (2)通过shell脚本
    官网对于使用shell脚本生成vfs_fonts.js文件的方法指导
    (3)通过php脚本
    我使用的是这种方法,所以前面两种没有详细介绍。
    官网对于使用php脚本生成vfs_fonts.js文件的方法指导
    将字体ttf文件和该php文件放置同一目录下,生成的vfs_fonts.js文件也会在该目录中。
<?php$output = "this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {";$phpDir=dir('.');while (($file=$phpDir->read())!==false) {if ($file!='..' && $file!='.' && $file!='makefont.php' && $file!='vfs_fonts.js') {$output .= '"';$output .= $file;$output .= '":"';$output .= base64_encode(file_get_contents($file));$output .= '",';}}$output=substr($output,0,-1);$output .= "};";if (isset($_REQUEST['tofile'])) {$fh = fopen('vfs_fonts.js', 'w') or die("CAN'T OPEN FILE FOR WRITING");fwrite($fh,$output);fclose($fh);echo 'vjs_fonts.js created';} else {echo $output;}

如果在目录下未生成vfs_fonts.js文件,在浏览器中显示文件内容,可以去掉if (isset($_REQUEST['tofile'])) {}这个判断条件。
生成的vfs_fonts.js文件如图所示:
在这里插入图片描述
需要将前面的"run.php"内容删除,得到:
在这里插入图片描述
对比原来Roboto字体的vfs_fonts.js文件,发现要设置normal、bold、italics、bolditalics样式,也是在同一个vfs_fonts.js文件中:
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
"xxx-Italic.ttf":"xxxxxxxxxxxxxxxx",
"xxx-Medium.ttf":"xxxxxxxxxxxxxxxx",
"xxx-MediumItalic.ttf":"xxxxxxxxxxxxxxxx",
"xxx-Regular.ttf":"xxxxxxxxxxxxxxxx"
}

使用该方法我导出的pdf能显示部分中文字体,也只能显示部分英文字体,不知道是生成方式有问题还是我字体ttf文件有问题。于是去找现成的资源了。

  1. 在网上寻找vfs_fonts.js资源
    资源下载地址
四. pdfmake.js

(以下内容找不到可以去dataTable.buttons.min.js找,找的时候找相似格式,主要讲个思路)

  1. 设置字体
    搜索Roboto,找到它设置字体样式部分,在后面添加自己的字体Chinese(这里四个样式用同一份字体文件):
pdfMake.fonts = {Roboto: {normal: 'Roboto-Regular.ttf',bold: 'Roboto-Medium.ttf',italics: 'Roboto-Italic.ttf',bolditalics: 'Roboto-MediumItalic.ttf'},Chinese: {normal: 'Chinese.ttf',bold: 'Chinese.ttf',italics: 'Chinese.ttf',bolditalics: 'Chinese.ttf'}
};
  1. 检查createPdf()函数
    在这里插入图片描述
    确保形式是pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
  2. 修改defaultStyle
    在这里插入图片描述
    找如下格式:
    在这里插入图片描述
    此外,将pdfmake.js里除了pdfmake.fonts = {}外所有的“Roboto”改成自己的字体“Chinese”。
五. 解决

在这里插入图片描述

六.参考资料

一些有用的参考资料:
导出PDF按钮在前端界面设置,而非Datatable中设置的
官网中关于非英文字符导出PDF乱码的讨论
datatable 导出无乱码中文pdf文件
pdfmake实现中文支持,解决中文乱码问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 挂载磁盘到指定目录

问题&#xff1a;公司分配了数据磁盘&#xff0c;但是分区也没有挂载到目录 首先 df -h 查看一下挂载点的情况 查看服务器上未挂载的磁盘 fdisk -l 注&#xff1a;图中sda、sdb &#xff08;a、b指的是硬盘的序号&#xff09; 分区操作 我们可以看到b硬盘有536G未分区&…

LinkedList概念+MyLinkedList的实现

文章目录 LinkedList笔记一、 LinkedList1.概念2.LinkedList的构造方法3.LinkedList的遍历 二、MyLinkedList的实现1.定义内部类2.打印链表、求链表长度、判断是否包含关键字3. 头插法和尾插法4.在任意位置插入5.删除结点6.清空链表 LinkedList笔记 一、 LinkedList 1.概念 L…

VSCode 自动修改闭合标签

1.打开应用商店&#xff0c;搜索 auto rename tag &#xff0c;选择第一个&#xff0c;点击安装。 2.安装完毕后随便打开一个 HTML 文件&#xff0c;当我们修改起始标签时&#xff0c;闭合标签也会自动更改。 原创作者&#xff1a;吴小糖 创建时间&#xff1a;2023.10.25

ChineseChess2

中国象棋&#xff1a;黑将&#xff0c;红帅双炮&#xff0c;只要红帅中间露头怎么走怎么赢 卡主黑将的走位&#xff0c;控制住就好了 ChineseChess-CSDN博客

hdlbits系列verilog解答(向量级联)-18

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 级联运算符允许将向量连接在一起以形成更大的向量。但是有时您希望将同一个数据级联在一起很多次,而做类似 assign a = {b,b,b,b,b,b}; .复制运算符允许重复一个向量并将它们连接在一起:{num{vector}}。这将按…

Linux下安装部署Redis

简介 redis是一个开源的、使用C语言编写的、支持网络交互的、可基于内存也可持久化的Key-Value数据库。 redis的特点就是&#xff1a;快&#xff0c;可以基于内存存储数据并提供超低延迟、超快的检索速度一般用于在系统中提供快速缓存的能力。 安装 1. 配置EPEL仓库 EPEL 的…

PHP 共享茶室棋牌室无人软硬件结合开发小程序系统的开发优势

随着科技的发展和人们生活方式的改变&#xff0c;共享经济和智能化成为了越来越受欢迎的趋势。在这样一个背景下&#xff0c;PHP共享茶室棋牌室无人软硬件结合开发小程序系统的出现&#xff0c;为人们提供了一种全新的娱乐和生活方式。本文将详细介绍PHP共享茶室棋牌室无人软硬…

zephyr核心数据结构 - struct device

struct device 的zephyr中的地位相当于linux中的 struct file_operations . 在linux中&#xff0c;奉行一切皆文件的思想&#xff1b;而在zephyr中&#xff0c;与linux相似&#xff0c;奉行一切皆设备的思想。 先来看看 struct device 长什么样&#xff1a; struct device {…

前8月,超百万台标配!高阶智驾域控「新」变化

智能驾驶渗透率的不断上升&#xff0c;尤其是域集中架构以及高阶智驾的加速落地&#xff0c;带动智能驾驶域控制器赛道一路向上。 本周&#xff0c;高工智能汽车研究院发布数据显示&#xff0c;2023年1-8月中国乘用车市场&#xff08;不含进出口&#xff0c;下同&#xff09;前…

酒石酸盐晶体是优质葡萄酒的一个特征?

来自云仓酒庄品牌雷盛红酒分享澄清一下&#xff0c;葡萄酒中的酒石酸盐晶体&#xff0c;在德国被称为“温斯坦”&#xff0c;既无害也不是质量差的标志&#xff0c;相反&#xff0c;它们是富含矿物质的葡萄酒的特征。虽然酒石酸盐可以在年轻的葡萄酒中结晶&#xff0c;但它们最…

Netty优化-扩展自定义协议中的序列化算法

Netty优化-扩展自定义协议中的序列化算法 一. 优化与源码1. 优化1.1 扩展自定义协议中的序列化算法 一. 优化与源码 1. 优化 1.1 扩展自定义协议中的序列化算法 序列化&#xff0c;反序列化主要用在消息正文的转换上 序列化时&#xff0c;需要将 Java 对象变为要传输的数据…

unity脚本_Mathf和Math c#

首先创建一个脚本 当我们要做一个值趋近于一个值变化时 可以用Mathf.Lerp(start,end,time);方法实现 比如物体跟随

通过IP地址可以做什么

通过IP地址可以做很多事情&#xff0c;因为它是互联网通信的基础之一。本文将探讨IP地址的定义、用途以及一些可能的应用。 IP地址的用途 1. 设备标识&#xff1a;IP地址用于标识互联网上的每个设备&#xff0c;这包括计算机、服务器、路由器、智能手机等。它类似于我们日常生…

折纸问题

折纸的次数 —— 从上到下的折痕 本质上是中序遍历的问题&#xff0c;因为每一次在已有的折痕后折的时候&#xff0c;当前折痕上的折痕一定为凹&#xff0c;当前折痕下的折痕一定为凸 。实际模拟了一个不存在的二叉树结构的中序遍历。 注&#xff1a;折纸折几次整颗二叉树就有…

解决adb root命令时错误 adbd cannot run as root in production builds

我测试的手机是小米8&#xff0c;root权限已经刷过了&#xff0c;但是在pc端使用adb root命令的时候&#xff0c;会报错"adbd cannot run as root in production builds" 后来查资料发现是因为Magisk和安卓9版本的问题 https://www.cnblogs.com/jeason1997/p/124105…

超好用的数据可视化工具推荐,小白也适用!

Excel、Tableau……可以做数据可视化的工具不少&#xff0c;但简单、好用又高效&#xff0c;甚至连无SQL基础的小白也能轻松使用的就真没几个。奥威BI数据可视化工具是少有的操作难度低、成本支出低、灵活自助分析能力强的BI工具。 1、操作难度低 奥威BI数据可视化工具的操作…

C++(Qt)软件调试---线程死锁调试(15)

C(Qt)软件调试—线程死锁调试&#xff08;15&#xff09; 文章目录 C(Qt)软件调试---线程死锁调试&#xff08;15&#xff09;1、前言2、常见死锁3、linux下gdb调试C死锁1.1 使用代码1.2 gdb调试 3、linux下gdb调试Qt死锁1.1 使用代码1.2 gdb调试 4、Windows下gdb调试C死锁5、W…

c++ 并发与多线程(12)线程安全的单例模式-1

一、什么是线程安全 在拥有共享数据的多条数据并行执行的程序中,线程安全的代码会通过同步机制保证各个线程都可以正常且正确的执行,不会出现数据污染等意外情况。 二、如何保证线程安全 法1、给共享的资源加把锁,保证每个资源变量每时每刻至多被一个线程占用; 法2、让线…

leetcode做题笔记202. 快乐数

编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&#xff0c…

【unaipp】tabBar配置/tabBar图标无法显示

bug&#xff1a;注意list配置iconfont我们自定义的图标就会无法显示 "tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff…