Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > 使用 jQuery jsPDF 插件生成pdf文档并解决中文乱码问题

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

    HTML5 herman 16867浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    最近论坛里有一位网友在实际用 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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

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

    相关文章推荐