前端如何使用pdfmake生成现有报告

发布时间:2021-06-22 15:36:57 作者:chen
来源:亿速云 阅读:837

这篇文章主要讲解了“前端如何使用pdfmake生成现有报告”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“前端如何使用pdfmake生成现有报告”吧!

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

支持中文

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

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

npm run build:vfs

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

import pdfmake from "pdfmake/build/pdfmake" const pdfFonts = require('@/assets/js/vfs_fonts.js')  pdfMake.vfs = pdfFonts  pdfMake.fonts = {      Roboto: {          normal: 'Roboto-Regular.ttf',          bold: 'Roboto-Medium.ttf',          italics: 'Roboto-Italic.ttf',          bolditalics: 'Roboto-Italic.ttf'      },      微软雅黑: {          normal: '微软雅黑.ttf',          bold: '微软雅黑-bold.ttf',          italics: '微软雅黑-italics.ttf',          bolditalics: '微软雅黑-bolditalics.ttf'      }  }

使用时:

var docDefinition = {      content: [ '惊天码盗' ],      defaultStyle: {          fontSize: 15,          bold: true,         font:"微软雅黑"     }  };

预览页面搭建

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

import pdfmake from "pdfmake/build/pdfmake" export function previewPdf(params) {     if(!params) return ;     const pdfDocGenerator = pdfMake.createPdf(params);        pdfDocGenerator.getDataUrl( dataUrl=>{         const targetElement = document.querySelector("#iframeContainer");         const pdfMakeIframe = document.querySelector("#pdfMakeKey");         if(pdfMakeIframe){             pdfMakeIframe.src = dataUrl;         }else{             const iframe = document.createElement("iframe");             iframe.id = 'pdfMakeKey';             iframe.src = dataUrl;              targetElement.appendChild(iframe)         }     }}

封面实现和断页

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

const docDefinition = {     background: function( currentPage, pageSize){         if(currentPage === 1){             return {                 iamge: "bgCoverImgUrl",                 width: pageSize.width,                 height: pageSize.height             }         }         return null;     }     content: ["惊天码盗"] }

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

{   pageOrientation: 'portrait',   content: [     {text: 'Text on Portrait'},     {text: 'Text on Landscape', pageOrientation: 'landscape', pageBreak: 'before'},     {text: 'Text on Landscape 2', pageOrientation: 'portrait', pageBreak: 'after'},     {text: 'Text on Portrait 2'},   ] }

页眉和页脚

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

const docDefinition = {   footer: function(currentPage, pageCount) {          return currentPage.toString() + ' of ' + pageCount;    },   header: function(currentPage, pageCount, pageSize) {     return [{         columns: [             {                 text:  this.headerContent.left,                 alignment:  'left'             },             {                 text:  this.headerContent.middle,                 alignment:  'center'             },             {                 text:  this.headerContent.right,                 alignment:  'right'             }             ],              margin: [10, 20]         }]   },   content: ["惊天码盗"] };

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

显示类型

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

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

内边距的实现

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

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

前端如何使用pdfmake生成现有报告

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

const dd = {   content: [     {       margin: [0, 20],       table: {         body: [           [             { text: 'CONTENTS', width: 'auto', fillColor: '#e7e6e6', fontSize: 26 },             { text: 'Padding ', fillColor: '#58ac5b', color: '#FFF', fontSize: 26 }           ]         ]       },       layout: {         defaultBorder: false,         paddingLeft: function (i, node) {           if (i === 0) {             return 10           }           return 20         },         paddingRight: function (i, node) {           if (i === 0) {             return 10           }           return 20         },         paddingTop: function (i, node) { return 10 },         paddingBottom: function (i, node) { return 10 }       }     }   ] }

效果是:

前端如何使用pdfmake生成现有报告

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

前端如何使用pdfmake生成现有报告

table的缺陷

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

{   // style: 'tableExample',   table: {     body: [       ['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'],       ['One value goes here', 'Another one here', 'OK?']     ]   } }

前端如何使用pdfmake生成现有报告

其他

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

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

感谢各位的阅读,以上就是“前端如何使用pdfmake生成现有报告”的内容了,经过本文的学习后,相信大家对前端如何使用pdfmake生成现有报告这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. 手动生成AWR报告
  2. 如何使用awrrpt.sql 生成AWR报告

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

前端 pdfmake

上一篇:ubuntu15.04如何卸载软件

下一篇:dubbo-go中randomLoadBalance的作用是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》