使用 jQuery jsPDF 插件生成pdf文档并解决中文乱码问题

HTML5 herman 9828浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xmtxtt,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序

最近论坛里有一位网友在实际用 jsPDF 插件,遇到了问题。我这个整理一下关于这个插件的用法。

jsPDF HTML5是一个客户端解决方案生成pdf文件。适合活动门票、报告、证书,等等。 它将在IE6+,Firefox 3 +,Chrome,Safari 3 +,Opera。IE9下工作。

jsPDF 插件

jspdf 官方地址:https://parall.ax/products/jspdf

jspdf 支持以下几种内容:

  • Images 图片
  • Font faces 字体
  • Two page Hello World 分页显示内容
  • Circles 椭圆图形等
  • Font sizes 设置字体大小
  • Landscape 预览设置,打印,大小缩放等
  • Lines 线条,简单图表
  • Rectangles 矩形图形
  • String Splitting 字符串拆分,自动换行
  • Triangles 支持三角形

除了上面的特色外,还支持大小缩放,大小调整,打印,下载等功能。

jspdf 实例

jspdf 的使用非常简单,只需导入对应js,编写以下代码即可。

var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');

完整代码如下:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Downloadify</title> 
	<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
	<style type="text/css" media="screen"> 
	body {background: #fff; width: 500px; margin: 20px auto;} 
	input, textarea, p { font-family: 宋体, 黑体; font-size: 12pt;} 
	input, textarea { border: solid 1px #aaa; padding: 4px; width: 98%;} 
	</style> 
	<script type="text/javascript" src="js/swfobject.js"></script> 
	<script type="text/javascript" src="js/downloadify.js"></script> 
	<script type="text/javascript" src="js/jspdf.js"></script> 
	<!-- <script type="text/javascript" src="js/downloadify.min.js"></script> --> 
	<script type="text/javascript"> 
		window.load=function(){ 
			Downloadify.create('downloadify',{ 
				filename: function(){ 
					return document.getElementById('filename').value; 
			}, 
			data: function(){ 
				var doc = new jsPDF(); 
				doc.text(20, 20, document.getElementById('data').value); 
				doc.addPage(); 
				doc.text(20, 20, document.getElementById('data').value); 
				return doc.output(); 
			}, 
			onComplete: function(){ alert('成功保存文件!'); }, 
			onCancel: function(){ alert('您已经取消保存文件'); }, 
			onError: function(){ alert('出现错误了'); }, 
			swf: 'js/downloadify.swf', 
			downloadImage: 'js/download.png', 
			width: 100, 
			height: 30, 
			transparent: true, 
			append: false 
			}); 
		} 
	</script> 
</head> 
<body onload="load();"> 
<input type="text" name="filename" value="文件名.pdf" id="filename" /><br /> 
<textarea cols="60" rows="10" name="data" id="data">it seem do not support to Chinese</textarea> 
<p id="downloadify">You must have Flash 10 installed to download this file.</p> 
</body> 
</html> 

jspdf 插件下载,大家可以到官网上自行下载。

中文乱码处理

jsPDF 插件对中文支持不够友好,会出现乱码问题。目前比较好的解决办法是,中文部分使用图片替换。还有一种做法是制作一个文字包。这种做法需要对源码有很深的理解。

感觉这样麻烦的,可以把所有内容都加入 Canvas 中,使用 html2canvas 插件将 canvas 中内容转换成图片,然后jspdf 中显示图片即可。关于 html2canvas 的内容,点这里进行学习。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用 jQuery jsPDF 插件生成pdf文档并解决中文乱码问题