请选择 进入手机版 | 继续访问电脑版
搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

解决html导出pdf中文乱码问题的正确姿势

[复制链接]
查看: 27|回复: 0

8157

主题

8157

帖子

2万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
24481
发表于 2019-12-2 12:52 | 显示全部楼层 |阅读模式
简介

本文利用jspdf 1.5.3版。GitHub地址:https://github.com/MrRio/jsPDF
jspdf是歪果仁斥地的,是以在一路头就没想过支持非英文之外的翰墨,这就致使了非英文的文本都是乱码。
是以就有其他大佬给增加了其他打点计划,到了1.5版本也正式参加了非英文支持的打点计划。
打点的思绪大略是,给jspdf加载其他字体库,使其可以一般输出中文。
打包字体文件

在起头的第一步我们需要从GitHub下载源代码,由于我们需要利用其中附带的工具fontconverter。
下载好后我们进入fontconverter文件夹可以看到以下目录。
我的关键词 处理html导出pdf中文乱码题目标正确姿势  热门消息 1730036-20191202093241933-1905913276

间接利用欣赏器翻开fontconverter.html文件,可以看到以下界面
我的关键词 处理html导出pdf中文乱码题目标正确姿势  热门消息 1730036-20191202093332633-1921676808

点击挑选"*.ttf"字体文件,然后点击天生,会获得一个js文件。这个文件就是把字体文件经过base64编码转换成字符串存储到js文件中。该文件在后续步调中利用。
天生的js文件结构大要以下:
我的关键词 处理html导出pdf中文乱码题目标正确姿势  热门消息 1730036-20191202094358579-893529381

重点留意

  • 字体文件仅支持ttf格式的文件,而且区分字体的粗细,假如HTML包含多种粗细的文本,必须加载多个字体
  • fontName 字段必须设备为小写(存在bug的原因原由)
  • 好心的提醒:不要利用商用授权字体,除非你有授权,商用授权字体如:微软雅黑
思源字体下载:https://pan.baidu.com/s/14YAE8X_zZ0wMY19npGrwrg
留意:此下载仅为博主随意找的一个网盘打包毗连,倡议大家到官网地址下载。
编写测试代码

在周全利用之前需要做一些测试,制止不必要的弯路。测试代码以下
  1.         
复制代码
由于html转pdf依靠html2canvas.js是以需要先加载此文件,github地址:https://github.com/niklasvh/html2canvas
此处代码导出了2个pdf文件,设备了中翰墨体后,一个是间接利用jspdf的API间接绘制pdf,此外一个则是利用html输出pdf文件。
重点留意:导出HTML需要在导出的HTML中对中文文本间接指定font-faimly,否者HTML导出的pdf仍会中文乱码
html转pdf代码

假如以上测试代码经过了,便可以编写正式的导出代码。
html方式界说:
html(HTMLelement|string,callback)
参数:

  • 第一个参数可以传递HTML的节点或HTML的代码字符串
  • 第二个参数是HTML转pdf完成后的回调,回调会传递pdf实例工具的参数
典范代码以下:
  1.         
复制代码
html到导出pdf的页面筹划留意事项:

  • 首先经过全局设备font-faimly为中翰墨体
  • 尝试导出后逐一检查仍为乱码元素的font-faimly能否是已加载的中翰墨体
  • 字体跟粗细有关,假如存在加粗的文本,则需要加载对应加粗的字体。
  • 由于间接经过js打包的字体文件很是的大,是以不宜过量过大,否则大要致使页面加载慢和js内存不够。

免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 淄博新闻网-淄博日报 淄博晚报 淄博财经新报 掌中淄博 淄博专业新闻资讯发布网站 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表