JS导出PDF插件的方法(支持中文、图片用法路径)_

1、JS导出PDF插件的方法(支持中文、图片用法路径)_ 在WEB上想做一个导出PDF的功能，发觉jsPDF比较多人推举，圆满的是不支持中文，最终找到pdfmake，很好地解决了此问题。它的效果可以先到l查看。在用法过程中，还发觉图片的插入是相对繁琐的一件事。 针对这些问题，本文的主要内容可分为三部分： pdfmake的基本用法方法； 如何解决中文问题; 如何通过指定图片地址插入图片。 pdfmake的基本用法方法 1.包含以下两个文件 script src=build/pdfmake.min.js/script script src=build/vfs_fonts.js/script 2.在JS

2、代码中声明一个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 li

3、nes ; /导出PDF pdfMake.createPdf(dd).download(); /script 根据上例操作，就可以看到提示文件下载了。关于pdfmake的完整教程请登陆pdfmake项目查看。 pdfmake支持中文 三个步骤： 1.到pdfmake项目网站，把工程都下载下来，然后进入工程名目将字体文件（比如微软雅黑.ttf)放到examples/fonts名目下，然后用法grunt dump_dir生成新的vfs_fonts.js文件； 从上面描述可知该工程是通过grunt管理的，假如无相关学问，请上网先补习下。 grunt dump_dir指令会将fonts名目下全部文件都

4、打包，因此无用文件请别放进去。 微软雅黑.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

5、, 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: 微软雅

6、黑 ; 以下为依据如上步骤做的一个完整例子源码： !DOCTYPE html html lang=zh-CN head meta charset=utf-8 titlemy 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, thi

7、s 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, ; pd

8、fMake.createPdf(dd).download(); /script /head body button onclick=down()下载/button /body /html 插入图片 在插入图片方面，jsPDF要求先将图片转换成Data URL才行，而pdfmake允许挺直指定路径，看起来是很便利，但这是有条件的，必需是以node.js作为服务器，或者将图片放到vfs_fonts.js中，所以总的来说，用处不大，还是一样得将图片转换成Data URL形式才行。 为解决此问题，我写了一个ImageDataURL的函数对象，可同时传入多个图片地址。在图片都加载完成后，ImageDat

9、aURL.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 hea

10、d meta charset=utf-8 titlemy 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); f

11、or (key in this.imgdata) if (this.imgdatakey = this.emptyobj)/不存在的图片挺直忽视 continue; imgs.push(image:this.imgdatakey);/pdfmake的图片格式image:image dataurl var dd = content: Title, imgs, , ; pdfMake.createPdf(dd).download(); /script /head body button onclick=down()下载/button script function ImageDataURL(url

12、s) /urls必需是字符串或字符串数组 pletenum = 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

13、; 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.imgd

14、ataindex = c.toDataURL(image/jpeg); for (i = 0; i p.totalnum; +i) if (p.imgdatai = null) break; if (i = p.totalnum) p.oncomplete(); ; img.onerror = function() p.imgdataindex = p.emptyobj; for (i = 0; i p.totalnum; +i) if (p.imgdatai = null) break; if (i = p.totalnum) p.oncomplete(); ; if (urls instanceof Array) this.totalnum = urls.length; this.imgdata = new Arr