JS导出PDF插件(支持中文、图片使用路径)
在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题。它的效果可以先到http://pdfmake.org/playground.html查看。在使用过程中,还发现图片的插入是相对繁琐的一件事。
针对这些问题,本文的主要内容可分为三部分:
- pdfmake的基本使用方法;
- 如何解决中文问题;
- 如何通过指定图片地址插入图片。
pdfmake的基本使用方法
1.包含以下两个文件
<script src="build/pdfmake.min.js"></script><script src="build/vfs_fonts.js"></script>
2.在JS代码中声明一个Document-definition对象,这个是pdfmake自己的术语。简单点说,就是创建一个至少包含content属性的对象。然后就可以调用pdfMake的方法导出PDF,具体见如下代码:
<script type="text/javascript">//创建Document-definition对象 var dd = {content: ['One paragraph','Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines']};//导出PDFpdfMake.createPdf(dd).download();</script>
按照上例操作,就可以看到提示文件下载了。关于pdfmake的完整教程请登陆pdfmake项目查看。
pdfmake支持中文
三个步骤:
1.到pdfmake项目网站,把工程都下载下来,然后进入工程目录将字体文件(比如微软雅黑.ttf
)放到examples/fonts
目录下,然后使用grunt dump_dir
生成新的vfs_fonts.js
文件;
从上面描述可知该工程是通过grunt管理的,如果无相关知识,请上网先补习下。
grunt dump_dir
命令会将fonts目录下所有文件都打包,因此无用文件请别放进去。
微软雅黑.ttf
网上一搜一大把,WINDOWS电脑系统盘下存放字体的目录也找得到。
2.回到自己的例子代码中,JS代码中修改pdfMake的fonts对象,声明当前要用到字体:
pdfMake.fonts = {Roboto: {normal: 'Roboto-Regular.ttf',bold: 'Roboto-Medium.ttf',italics: 'Roboto-Italic.ttf',bolditalics: 'Roboto-Italic.ttf'},微软雅黑: {normal: '微软雅黑.ttf',bold: '微软雅黑.ttf',italics: '微软雅黑.ttf',bolditalics: '微软雅黑.ttf',}};
3.Document-definition对象中声明默认要使用的字体,具体来说:就是声明一个对象,除了content属性,还要有一个defaultStyle属性,该defaultStyle下面还有再有一个font属性:
var dd = {content: ['中英文测试','Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'],defaultStyle: {font: '微软雅黑'}};
以下为根据如上步骤做的一个完整例子源码:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>my first export PDF</title><script src="build/pdfmake.min.js"></script><script src="build/vfs_fonts.js"></script><script>function down() {var dd = {content: ['中英文测试','Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'],defaultStyle: {font: '微软雅黑'}};pdfMake.fonts = {Roboto: {normal: 'Roboto-Regular.ttf',bold: 'Roboto-Medium.ttf',italics: 'Roboto-Italic.ttf',bolditalics: 'Roboto-Italic.ttf'},微软雅黑: {normal: '微软雅黑.ttf',bold: '微软雅黑.ttf',italics: '微软雅黑.ttf',bolditalics: '微软雅黑.ttf',}};pdfMake.createPdf(dd).download();}</script>
</head><body><button onclick="down()">下载</button>
</body>
</html>
插入图片
在插入图片方面,jsPDF要求先将图片转换成Data URL才行,而pdfmake允许直接指定路径,看起来是很方便,但这是有条件的,必须是以node.js作为服务器,或者将图片放到vfs_fonts.js中,所以总的来说,用处不大,还是一样得将图片转换成Data URL形式才行。
为解决此问题,我写了一个ImageDataURL的函数对象,可同时传入多个图片地址。在图片都加载完成后,ImageDataURL.oncomplete将被触发,在回调中通过this.imgdata取出各个图片的Data URL,根据pdfmake的要求组织下,就可正确生成pdf了。
ImageDataURL的原理是通过H5的canvas标签,将图片绘制在canvas上,然后通过canvas的toDataURL得到图像的Data URL。使用时请注意浏览器兼容性问题。
以下为将sampleImage.jpg, sampleage.jpg, sampleImage.jpg依次写入PDF的例子,测试时sampleage.jpg不存在,PDF直接忽略。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>my second export PDF</title><script src="build/pdfmake.min.js"></script><script src="build/vfs_fonts.js"></script><script>function down() {var x = new ImageDataURL(["sampleImage.jpg", "samplage.jpg", "sampleImage.jpg"]);x.oncomplete = function() {var imgs = new Array();console.log("complete");for (key in this.imgdata) {if (this.imgdata[key] == this.emptyobj)//不存在的图片直接忽略continue;imgs.push({image:this.imgdata[key]});//pdfmake的图片格式{image:image dataurl}}var dd = {content: ['Title',imgs,],};pdfMake.createPdf(dd).download();}}</script>
</head><body><button onclick="down()">下载</button>
<script>
function ImageDataURL(urls) {//urls必须是字符串或字符串数组
this.completenum = 0;
this.totalnum = 0;
this.imgdata = new Array();
this.emptyobj = new Object();
this.oncomplete = function(){};
this.getDataURL = function(url, index) { var c = document.createElement("canvas");
var cxt = c.getContext("2d");
var img = new Image();
var dataurl;
var p;
p = this;
img.src = url;
img.onload = function() { var i;
var maxwidth = 500;
var scale = 1.0;
if (img.width > maxwidth) { scale = maxwidth / img.width;c.width = maxwidth;c.height = Math.floor(img.height * scale);} else {c.width= img.width;c.height= img.height;}cxt.drawImage(img, 0, 0, c.width, c.height);p.imgdata[index] = c.toDataURL('image/jpeg');for (i = 0; i < p.totalnum; ++i) {if (p.imgdata[i] == null)break;}if (i == p.totalnum) {p.oncomplete();}};img.onerror = function() {p.imgdata[index] = p.emptyobj;for (i = 0; i < p.totalnum; ++i) {if (p.imgdata[i] == null)break;}if (i == p.totalnum) {p.oncomplete();}};}if (urls instanceof Array) {this.totalnum = urls.length; this.imgdata = new Array(this.totalnum);for (key in urls) {this.getDataURL(urls[key], key);}} else {this.imgdata = new Array(1);this.totalnum = 1;this.getDataURL(urls, 0);}}</script>
</body>
</html>
参考
- pdfmake如何使用自定义的字体
- pdfmake的项目
- pdfmake演示
转载于:https://www.cnblogs.com/lonelyxmas/p/8744205.html
JS导出PDF插件(支持中文、图片使用路径)相关推荐
- pd4ml技术html导出pdf,支持中文,兼容Linux
java html导出pdf的文章有很多大多都使用的是itext,其实用过的都知道itext有时并不能满足我们的需求,不能兼容html的样式,而且从html页面导出的图片到pdf中也并不好处理.Fly ...
- 纯JS导出excel(支持中文)
JsonExportExcel 简介 github EXAMPLE 使用方法 1.引入js (dist目录下JsonExportExcel.min.js) <script src="h ...
- PDF怎么支持中文 KendoUI 导出PDF
大家好,我是米娅 我尝试了很多种kendo 上PDF的导出,包括Grid与整个div界面.都不支持中文,它官网上面的都是支持英文的,我导出的中文都是这种(□□□)方框,数字和英文字符都能正确的导出, ...
- bootstrap table export插件导出pdf格式文件中文乱码问题解决办法
bootstrap table export插件导出pdf格式文件中文乱码的问题折腾了我整整两天,网上到处都是改源码,自己设置字体的方案,我都没搞定.结果今天看到官方文档(地址:GitHub - hh ...
- iText导出pdf、word、图片
一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生成PDF报表,客户端采用超级连接显示 ...
- PHP生成PDF完美支持中文,解决TCPDF乱码
PHP生成PDF完美支持中文,解决TCPDF乱码 2011-09-26 09:04 418人阅读 评论(0) 收藏 举报 phpfontsheaderttfxhtml文档 PHP生成PDF完美支持中文 ...
- 使用java+OpenCV进行图片对比并标记差异部分(支持中文图片路径)
1.设计方法为: 首先将两个图片转化为灰度图: 进行灰度图比对,1为完全相同,此处可以插入阀值: 计算两个灰度图的绝对差值并放入一个新的Mat对象: 将新的mat对象进行绝对差值化: 寻找轮廓图并用红 ...
- Java解析PDF文件(PDFBOX、itext解析PDF)导出PDF中的子图片,去除PDF中的水印
前段时间,为了解析PDF,花了不少时间去学习PDFbox和itext,这两个都是处理PDF的开源库,有java和C#的.作为一个刚开始学习这两个开源库的,感觉百度上的资源还是太少了.我做的是一个关于P ...
- 查找解决使用html2pdf插件导出PDF不展示中文的问题
在外网环境写了个导出PDF的demo可以正常导出PDF,也可以正常展示中文,但是当我把代码移植到内网服务器上时,导出的PDF不能正常展示中文,日志也没有打印异常,于是就用源码执行看看什么原因,排查过程 ...
最新文章
- Java NIO 学习笔记 缓冲区补充
- 解决Windows与虚拟机ubuntu之间相互直接拖动文件
- leetcode算法题--分隔链表★
- 成功解决VirtualBox is not installed. Please re-run the Toolbox Installer and try again.
- EasyUI中Combox组合框的简单使用
- 【Qt5.8】TypeError: Property 'asciify' of object Core问题解决办法
- linux登录界面主题,Ubuntu 18.10(Cosmic Cuttlefish) 新登录界面亮相,主题为Yaru
- 【线性代数】思维脑图
- 利用VBB仿真——实现数码管色子
- 腾讯视频qlv格式怎么转换成mp4在手机上播放
- 一文帮你理解 Google SRE 体系
- wordcloud----canvas 绘制标签云/词云web版wordle(一)
- 【转】RTF格式分析
- python安装reporter
- 【牛客刷题-SQL大厂面试真题】NO5.某宝店铺分析(电商模式)
- NEAT(基于NEAT-Python模块)实现监督学习和强化学习
- 计算机硬盘配置参数错误怎么办,电脑提示移动硬盘参数错误的解决方法
- 一篇文章带你认识数学建模中的二维插值
- 达内php难吗,深圳达内php教学好吗 说说我学习的经历
- Bambook 稍后阅读 V1.01 发布
热门文章
- List元素互换,List元素转换下标,Java Collections.swap()方法实例解析
- 2022-2028年中国电压力锅市场投资分析及前景预测报告
- Redis 高级特性(1)—— 事务 过期时间 排序
- 【Sql Server】数据库的安全机制
- shell编程_linux
- Apriori算法通俗详解_fpgrowth2_关联分析评估
- H.264 Video Codec速度和质量
- 2021年大数据基础(五):​​​​​​​​​​​​​​​​​​​​​分布式技术
- 2021年大数据Spark(三十七):SparkStreaming实战案例二 UpdateStateByKey
- Timer 的简单介绍