网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 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'
           ]
        };
     //导出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目录下所有文件都打包，因此无用文件请别放进去。
    微软雅黑.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>
    以上这篇JS导出PDF插件的方法(支持中文、图片使用路径)就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 14:08:26