怎样将英文html文件转换成中文乱码,解决html导出pdf中文乱码问题的正确姿势
简介
jspdf是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非英文的文本都是乱码。
因此就有其他大佬给增加了其他解决方案,到了1.5版本也正式加入了非英文支持的解决方案。
解决的思路大致是,给jspdf加载其他字体库,使其能够正常输出中文。
打包字体文件
在开始的第一步我们需要从github下载源代码,因为我们需要使用其中附带的工具fontconverter。
下载好后我们进入fontconverter文件夹可以看到以下目录。
直接使用浏览器打开fontconverter.html文件,可以看到如下界面
点击选择"*.ttf"字体文件,然后点击生成,会得到一个js文件。这个文件就是把字体文件通过base64编码转换成字符串存储到js文件中。该文件在后续步骤中使用。
生成的js文件结构大概如下:
重点注意
字体文件仅支持ttf格式的文件,并且区分字体的粗细,如果html包含多种粗细的文本,必须加载多个字体
fontname 字段必须设置为小写(存在bug的原因)
善意的提醒:不要使用商用授权字体,除非你有授权,商用授权字体如:微软雅黑
注意:此下载仅为博主随意找的一个网盘打包连接,建议大家到官网地址下载。
编写测试代码
在全面应用之前需要做一些测试,避免不必要的弯路。测试代码如下
var doc = new jspdf({ orientation: 'p', format: 'a4' });
doc.setfont('sourcehansanscn-normal', 'normal');
doc.setfontsize(20);
doc.html('
', {
callback: function (newdoc) {
newdoc.save('chinese-html.pdf')
}
});
doc.text("中文欢迎您", 1, 30);
doc.save('chinese-pdf.pdf')
因为html转pdf依赖html2canvas.js因此需要先加载此文件,github地址:
此处代码导出了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实例对象的参数
范例代码如下:
var doc = new jspdf({ orientation: 'p', format: 'a4' });
doc.setfont('sourcehansanscn-normal', 'normal');
doc.setfontsize(20);
doc.html(document.body, {
callback: function (newdoc) {
newdoc.save('chinese-html.pdf')
}
});
html到导出pdf的页面设计注意事项:
首先通过全局设置font-faimly为中文字体
尝试导出后逐一检查仍为乱码元素的font-faimly是否是已加载的中文字体
字体跟粗细有关,如果存在加粗的文本,则需要加载对应加粗的字体。
因为直接通过js打包的字体文件非常的大,因此不宜过多过大,否则可能导致页面加载慢和js内存不足。
怎样将英文html文件转换成中文乱码,解决html导出pdf中文乱码问题的正确姿势相关推荐
- html转换成pdf后乱码,解决html导出pdf中文乱码问题的正确姿式
简介 本文使用jspdf 1.5.3版.GitHub地址:https://github.com/MrRio/jsPDFhtml jspdf是歪果仁开发的,所以在一开始就没想过支持非英文之外的文字,这就 ...
- html转换pdf中文失败,解决html导出pdf中文乱码问题的正确姿势
简介 jspd页求是解这如前总回随4泉标使幻近面的是,f是歪果仁开发的,因此在一开始就没想过支持非英文以外的文字,这就导致了非英文的文本朋不功事做时次功好来多这开制的请一例农在个屏器随的会满和满时波实 ...
- xml文件转换成图片_怎样能把PDF文件转换成图片?
我们的日常生活工作中时常碰到pdf与Excel.Word.ppt和jpg等文件格式的转换,有时候由于工作的需要,要把PDF文件转换成图片.并且现在网上的很多素材都是PDF文件格式的,如果我们想要里面的 ...
- 手机PDF文件转换成图片教程来了,PDF转换器推荐
手机PDF文件怎么转换成图片?你还在用截图的方式来将PDF文件转换成图片吗?虽然确实是一种转换的方法,但是使用过的都会发现转换出来的图片清晰度不高,那该如何高清转换呢?今天小编就给大家推荐一个比较好用 ...
- 亲测好用的caj文件转换成带目录的文字版PDF文件工具
参考GitHub上caj2pdf/caj2pdf: Convert CAJ (China Academic Journals) files to PDF. 转换中国知网 CAJ 格式文献为 PDF.佛 ...
- 【PDF转换图片】如何把pdf文件转换成图片?如何把批量pdf文件转换成图片?如何把多目录批量pdf文件转换成图片?如何pdf文件转换成图片不失真不损失清晰度?今天教方法
在工作中常常需要将PDF转换为图片,好多免费但是图片有水印和功能不全的问题. 还有市面上很多软件知识完成了部分的工作,比如只能单个文件转PDF,那么遇到多文件的就只能挨个转么? 还有转换的格式支持的非 ...
- word转pdf图片模糊怎么办_嗨格式PDF转换器如何将PDF文件转换成Word?PDF转Word方法...
日常办公,我们有时候需要将PDF文件格式进行转换,鉴于PDF文件的特殊性,这就需要借助专业软件,例如嗨格式PDF转换器.嗨格式PDF转换器支持PDF.Word.Excel.PPT.图片等多种文件格式互 ...
- pdf英文转换成html网页,PDF文件转换成html网页文件小方法
原标题:PDF文件转换成html网页文件小方法 现在不知道大家知不知道小学已经开设编程课程了.我记得我们小时候连上个微机课都是一种奢望,所以现在的孩纸还是很享福的呀.但是很多的小白估计听着代码.编程这 ...
- 怎样将语音文件转换成文字
怎样将语音文件转换成文件?在职场工作当中都是三天一小会,五天一大会,甚至有时每天都会开会.在开会时,都要求大家将会议中的重要内容记录下来,并整理成文件.可是有时会因为会议时间较多,讲得内容却有很多,就 ...
最新文章
- php 5.6 新特性,PHP 5.6正式发布:新特性、及功能改进介绍
- 对Java初学者来说,到底Java有哪些高效的开源库?
- Animation Property Animation 使用
- mysql8.0版本的服务器名称_云服务器Mysql安装配置
- Eclipse导出APK文件报错 android lint problem
- 字节流相关操作,基本字节流的Copy文件
- 在网页中放入贴纸插画是怎样的体验?这样的UI素材,你还不收藏!
- Oracle删除用户和表空间
- linux 建立用户kde目录,安装KDE Plasma后,你要做的七件事
- 【车间调度】基于matlab改进的鲸鱼算法求解双目标柔性车间调度问题【含Matlab源码 026期】
- Magento版本比较:Magento社区版 vs Magento企业版本 vs MEC Magento专业版2
- VB连接oracle数据库
- 介绍VMware虚拟化存储原理及数据恢复方法
- 【蚂蚁链学习2】蚂蚁链智能合约初级语法(数组、结构体、散列函数、事件)
- windows10LTSC下载与安装
- MATLAB添加噪声
- 2022-2028年中国危化品运输行业市场深度分析及投资规模预测报告
- leetcode简单1742/867
- Android计步器获取手机步数
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
热门文章
- 两个奇技淫巧,将 Docker 镜像体积减小 99%
- html5游戏闪屏卡顿,HTML5 闪屏的熊猫
- 查询mysql上传大小限制_解决数据库phpmyadmin中上传最大限制:2,048 KB
- php 刷新iframe,js刷新iframe
- java 连连看_java—连连看-实现封装
- 微信商城小程序操作为产品增加颜色尺寸长度等多规格内容
- android studio 设置 ndk 路径
- l2_norm opencv torch比较
- c++ 导入caffe
- __call__() got an unexpected keyword argument 'partition_info'