最近的项目中有一个新需求,要求前端将页面导出为pdf文件,翻阅资料,找到了jspdf这个文件生成库,唯一出现的bug就是中文乱码,如下图所示:
好在找到了解决的方法,现将解决方法记录如下:
第一步:先将jspdf下载下来https://github.com/MrRio/jsPDF
找到里面转换字体的文件
第二步:选择合适的字体。
我这里选择的是电脑自带的黑体进行的转换,你们也可以根据需求去转换自己需要的字体。找到电脑中simhei.ttf文件,打开上一步中的fontconverter.html文件进行转换。我这里转换之后的js文件名为simhei-normal.js。
第三步:将字体添加到导出方法中,如下代码所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中文汉字乱码测试</title>
<script src="jspdf.min.js" charset="utf-8"></script>
<script src="jspdf.customfonts.min.js"></script>
<script src="simhei-normal.js"></script>
<script type="text/javascript">
//页面初始化
function init() {
var doc = new jsPDF();
//添加并设置字体
doc.addFont('simhei.ttf', 'simhei', 'normal');
doc.setFont('simhei');
doc.text(20, 20, '中文汉字乱码测试');
doc.save('Test.pdf');
}
</script>
</head>
<body onload="init()">
</body>
</html>
最后测试一下效果,如下图所示,导出的文件已经是正常的黑体中文了。
如果不想自己转换得也可以直接下载我整理好的文件:https://download.csdn.net/download/jinggaoniao/12881812 |