我们一起探索前端生成PDF

 巧用pdfmake。

在使用层面讲如何使用pdfmake生成现有报告，从以下几方面实现：

  • 支持中文
  • 预览页面搭建
  • 封面实现和断页
  • 页眉和页脚实现
  • pdfmake显示类型
  • 如何实现内边距
  • table无法居中显示

支持中文

pdfmake默认不支持中文，需要我们自己实现。找中文的字体文件(ttf结尾的文件)这个任务就交到我们自己手里了，并且字体文件需要支持粗体和斜体，否则字体加粗和斜体属性不生效。

把我们找到的字体文件，放入pdfmake官方github目录下examples下，执行

 
 
 
 
      
  
  
  
  1. npm run build:vfs 
    2.

它会把你放入examples下的所有字体都统一打包到build文件下的vfs_fonts.js中，然后在项目中使用：

 
 
 
 
      
  
  
  
  1. import pdfmake from "pdfmake/build/pdfmake" 
    2.   
  
  
  
  2. const pdfFonts = require('@/assets/js/vfs_fonts.js')  
    3.   
  
  
  
  3. pdfMake.vfs = pdfFonts  
    4.   
  
  
  
  4. pdfMake.fonts = {  
    5.   
  
  
  
  5.     Roboto: {  
    6.   
  
  
  
  6.         normal: 'Roboto-Regular.ttf',  
    7.   
  
  
  
  7.         bold: 'Roboto-Medium.ttf',  
    8.   
  
  
  
  8.         italics: 'Roboto-Italic.ttf',  
    9.   
  
  
  
  9.         bolditalics: 'Roboto-Italic.ttf'  
    10.   
  
  
  
  10.     },  
    11.   
  
  
  
  11.     微软雅黑: {  
    12.   
  
  
  
  12.         normal: '微软雅黑.ttf',  
    13.   
  
  
  
  13.         bold: '微软雅黑-bold.ttf',  
    14.   
  
  
  
  14.         italics: '微软雅黑-italics.ttf',  
    15.   
  
  
  
  15.         bolditalics: '微软雅黑-bolditalics.ttf'  
    16.   
  
  
  
  16.     }  
    17.   
  
  
  
  17. } 
    18.

使用时：

 
 
 
 
      
  
  
  
  1. var docDefinition = {  
    2.   
  
  
  
  2.     content: [ '惊天码盗' ],  
    3.   
  
  
  
  3.     defaultStyle: {  
    4.   
  
  
  
  4.         fontSize: 15,  
    5.   
  
  
  
  5.         bold: true, 
    6.   
  
  
  
  6.         font:"微软雅黑" 
    7.   
  
  
  
  7.     }  
    8.   
  
  
  
  8. }; 
    9.

预览页面搭建

pdf预览的逻辑大都是通过iframe实现，通过getDataUrl获取url地址

 
 
 
 
      
  
  
  
  1. import pdfmake from "pdfmake/build/pdfmake" 
    2.   
  
  
  
  2. export function previewPdf(params) { 
    3.   
  
  
  
  3.     if(!params) return ; 
    4.   
  
  
  
  4.     const pdfDocGenerator = pdfMake.createPdf(params);    
    5.   
  
  
  
  5.     pdfDocGenerator.getDataUrl( dataUrl=>{ 
    6.   
  
  
  
  6.         const targetElement = document.querySelector("#iframeContainer"); 
    7.   
  
  
  
  7.         const pdfMakeIframe = document.querySelector("#pdfMakeKey"); 
    8.   
  
  
  
  8.         if(pdfMakeIframe){ 
    9.   
  
  
  
  9.             pdfMakeIframe.src = dataUrl; 
    10.   
  
  
  
  10.         }else{ 
    11.   
  
  
  
  11.             const iframe = document.createElement("iframe"); 
    12.   
  
  
  
  12.             iframe.id = 'pdfMakeKey'; 
    13.   
  
  
  
  13.             iframe.src = dataUrl;  
    14.   
  
  
  
  14.             targetElement.appendChild(iframe) 
    15.   
  
  
  
  15.         } 
    16.   
  
  
  
  16.     }} 
    17.

封面实现和断页

pdfmake默认是没有封面这个设置，但是提供了一个设置背景的函数，可以给每个页面设置一个背景，可以是文字背景，也可以是图片背景。

 
 
 
 
      
  
  
  
  1. const docDefinition = { 
    2.   
  
  
  
  2.     background: function( currentPage, pageSize){ 
    3.   
  
  
  
  3.         if(currentPage === 1){ 
    4.   
  
  
  
  4.             return { 
    5.   
  
  
  
  5.                 iamge: "bgCoverImgUrl", 
    6.   
  
  
  
  6.                 width: pageSize.width, 
    7.   
  
  
  
  7.                 height: pageSize.height 
    8.   
  
  
  
  8.             } 
    9.   
  
  
  
  9.         } 
    10.   
  
  
  
  10.         return null; 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12.     content: ["惊天码盗"] 
    13.   
  
  
  
  13. } 
    14.

这个自动断页可以说是非常的赞，省去了你复杂的计算。如果你想某一页单独放一段文案，或者在某段文案后单独开一页，pageBreak可以帮你实现。

 
 
 
 
      
  
  
  
  1. { 
    2.   
  
  
  
  2.   pageOrientation: 'portrait', 
    3.   
  
  
  
  3.   content: [ 
    4.   
  
  
  
  4.     {text: 'Text on Portrait'}, 
    5.   
  
  
  
  5.     {text: 'Text on Landscape', pageOrientation: 'landscape', pageBreak: 'before'}, 
    6.   
  
  
  
  6.     {text: 'Text on Landscape 2', pageOrientation: 'portrait', pageBreak: 'after'}, 
    7.   
  
  
  
  7.     {text: 'Text on Portrait 2'}, 
    8.   
  
  
  
  8.   ] 
    9.   
  
  
  
  9. } 
    10.

页眉和页脚

页眉和页脚的实现就太方便了。

 
 
 
 
      
  
  
  
  1. const docDefinition = { 
    2.   
  
  
  
  2.   footer: function(currentPage, pageCount) {  
    3.   
  
  
  
  3.         return currentPage.toString() + ' of ' + pageCount;  
    4.   
  
  
  
  4.   }, 
    5.   
  
  
  
  5.   header: function(currentPage, pageCount, pageSize) { 
    6.   
  
  
  
  6.     return [{ 
    7.   
  
  
  
  7.         columns: [ 
    8.   
  
  
  
  8.             { 
    9.   
  
  
  
  9.                 text:  this.headerContent.left, 
    10.   
  
  
  
  10.                 alignment:  'left' 
    11.   
  
  
  
  11.             }, 
    12.   
  
  
  
  12.             { 
    13.   
  
  
  
  13.                 text:  this.headerContent.middle, 
    14.   
  
  
  
  14.                 alignment:  'center' 
    15.   
  
  
  
  15.             }, 
    16.   
  
  
  
  16.             { 
    17.   
  
  
  
  17.                 text:  this.headerContent.right, 
    18.   
  
  
  
  18.                 alignment:  'right' 
    19.   
  
  
  
  19.             } 
    20.   
  
  
  
  20.             ], 
    21.   
  
  
  
  21.  
    22.   
  
  
  
  22.             margin: [10, 20] 
    23.   
  
  
  
  23.         }] 
    24.   
  
  
  
  24.   }, 
    25.   
  
  
  
  25.   content: ["惊天码盗"] 
    26.   
  
  
  
  26. }; 
    27.

可以精准定位某个页面做一些特殊的设置。

显示类型

相对于前端来说大多显示类型都已经定型了，比如表格、文本、列表、图片等。在pdfmake中一共给我们提供了这些显示类型：

text
普通文本，需要注意的就是字体，如果所提供字体不支持，所设置的属性就不显示。同时text可以嵌套。
columns
列，平铺的列元素。在pdfmake中没有块级元素的概念，如果你想平铺两个或者多个文本（比如前面icon，后面文本），colums会满足你。每列之间的距离可以通过columnGap设置。
list
跟html标签ul或ol相同。
table
表格，唯一提供内边距属性的类型。强大到可以实现任何简单的样式，相当于display：table。但是弊端也相当明显，不能垂直居中。
image/svg
图片。
stack栈，相当于数组[]。

内边距的实现

text文本在pdfmake中是一个块级元素(css思路定义)。无法实现内边距，单个text文本独占一行。

 
 
 
 
      
  
  
  
  1. const dd = { 
    2.   
  
  
  
  2.     content: [ 
    3.   
  
  
  
  3.         'First paragraph', 
    4.   
  
  
  
  4.         { text:"234", background:'red',color:"#fff",fontSize:20 }, 
    5.   
  
  
  
  5.         'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines' 
    6.   
  
  
  
  6.     ] 
    7.   
  
  
  
  7. } 
    8.

在pdfmake类型中只有table可以实现内边距，那么我们就可以尝试以table的方式布局，例如

 
 
 
 
      
  
  
  
  1. const dd = { 
    2.   
  
  
  
  2.   content: [ 
    3.   
  
  
  
  3.     { 
    4.   
  
  
  
  4.       margin: [0, 20], 
    5.   
  
  
  
  5.       table: { 
    6.   
  
  
  
  6.         body: [ 
    7.   
  
  
  
  7.           [ 
    8.   
  
  
  
  8.             { text: 'CONTENTS', width: 'auto', fillColor: '#e7e6e6', fontSize: 26 }, 
    9.   
  
  
  
  9.             { text: 'Padding ', fillColor: '#58ac5b', color: '#FFF', fontSize: 26 } 
    10.   
  
  
  
  10.           ] 
    11.   
  
  
  
  11.         ] 
    12.   
  
  
  
  12.       }, 
    13.   
  
  
  
  13.       layout: { 
    14.   
  
  
  
  14.         defaultBorder: false, 
    15.   
  
  
  
  15.         paddingLeft: function (i, node) { 
    16.   
  
  
  
  16.           if (i === 0) { 
    17.   
  
  
  
  17.             return 10 
    18.   
  
  
  
  18.           } 
    19.   
  
  
  
  19.           return 20 
    20.   
  
  
  
  20.         }, 
    21.   
  
  
  
  21.         paddingRight: function (i, node) { 
    22.   
  
  
  
  22.           if (i === 0) { 
    23.   
  
  
  
  23.             return 10 
    24.   
  
  
  
  24.           } 
    25.   
  
  
  
  25.           return 20 
    26.   
  
  
  
  26.         }, 
    27.   
  
  
  
  27.         paddingTop: function (i, node) { return 10 }, 
    28.   
  
  
  
  28.         paddingBottom: function (i, node) { return 10 } 
    29.   
  
  
  
  29.       } 
    30.   
  
  
  
  30.     } 
    31.   
  
  
  
  31.   ] 
    32.   
  
  
  
  32. } 
    33.

效果是：

像目录这种效果也是table做出来的：

table的缺陷

看似table可以实现任何样本组合，但是在单元格垂直居中这块，卡住了。

 
 
 
 
      
  
  
  
  1. { 
    2.   
  
  
  
  2.   // style: 'tableExample', 
    3.   
  
  
  
  3.   table: { 
    4.   
  
  
  
  4.     body: [ 
    5.   
  
  
  
  5.       ['Column 1', 'Column 2The following table has nothing more than a body array，The following table has nothing more than a body array，The following table has nothing more than a body array，The following table has nothing more than a body array', 'Column 3'], 
    6.   
  
  
  
  6.       ['One value goes here', 'Another one here', 'OK?'] 
    7.   
  
  
  
  7.     ] 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

其他

目前发现不完美的一点，就是table单元格垂直居中，除了这一点，table很灵活，可以实现多级表头，嵌套表格，合并单元格，灵活定制各个单元格边框线条宽度和颜色。

同时还具备水印、加密、二维码生成、内外链接、目录生成。相比jspdf帮我们节省了很多步骤。那么我们下期聊聊jsPdf。

本文转载自微信公众号「惊天码盗」，可以通过以下二维码关注。转载本文请联系惊天码盗公众号。

网站标题：我们一起探索前端生成PDF
URL地址：http://www.shufengxianlan.com/qtweb/news17/354317.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设知识

同城分类信息

遂宁海缘科技　　 　成都400电话办理　　 　成都婚庆策划　　 　成都网络营销　　 　犀浦防纹窗　　 　平昌保洁　　 　成都光华机房　　 　兴宏源活动板房　　 　高端网站策划　　 　达州主机托管　　 　眉山服务器托管　　 　LED显示屏厂家　　 　成都网站推广　　 　app软件开发　　 　温江服务器托管　　 　名片印刷　　 　绵阳电信服务器托管　　 　成都画册快印　　 　温江电信机房　　 　都江堰网站建设