的前端生成，熟练使用pdfmake吧。在使用上，如何使用pdfmake生成现有报表可以从以下几个方面来实现：支持中文预览页构建封面实现和分页页眉页脚实现不支持中文，需要我们自己实现。查找中文字体文件（以ttf结尾的文件）的任务就交给我们了，字体文件需要支持粗体和斜体，否则字体的粗体和斜体属性将不会生效。将我们找到的字体文件放到pdfmake官方github目录下的examples中，执行npmrunbuild:vfs，它会将你放在examples下的所有字体打包到build文件下的vfs_fonts.js中，然后在项目中使用：importpdfmakefrom"pdfmake/build/pdfmake"constpdfFonts=require('@/assets/js/vfs_fonts.js')pdfMake.vfs=pdfFontspdfMake.fonts={Roboto:{normal:'Roboto-Regular.ttf',粗体:'Roboto-Medium.ttf',italics:'Roboto-Italic.ttf',bolditalics:'Roboto-Italic.ttf'},MicrosoftYahei:{normal:'MicrosoftYahei.ttf',bold:'MicrosoftYahei-bold.ttf',italics:'MicrosoftYahei-italics.ttf',bolditalics:'MicrosoftYahei-bolditalics.ttf'}}使用时：vardocDefinition={content:['惊爆代码小偷'],defaultStyle:{fontSize:15,bold:true,font:"微软雅黑"}};预览页面构建pdf预览的逻辑大多是通过iframe实现的，通过getDataUrl获取url地址params);pdfDocGenerator.getDataUrl(dataUrl=>{consttargetElement=document.querySelector("#iframeContainer");constpdfMakeIframe=document.querySelector("#pdfMakeKey");if(pdfMakeIframe){pdfMakeIframe.src=dataUrl;}else{constiframe=document.createElement("iframe");iframe.id='pdfMakeKey';iframe.src=dataUrl;targetElement.appendChild(iframe)}}}覆盖实现和中断页面pdfmake默认没有封面设置，但是提供了设置背景的功能。可以为每个页面设置背景，可以是文字背景，也可以是图片背景pageSize.width,height:pageSize.height}}returnnull;}content:["惊爆代码贼"]}这个自动分页可以说是非常感谢了，省去了你繁琐的计算。如果你想在某个页面上放置一段文案，或者一段文案后打开一个单独的页面，pageBreak可以帮你实现。{pageOrientation:'portrait',content:[{text:'TextonPortrait'},{text:'TextonLandscape',pageOrientation:'landscape',pageBreak:'before'},{text:'TextonLandscape2',pageOrientation:'portrait',pageBreak:'after'},{text:'TextonPortrait2'},]}页眉页脚页眉页脚的实现太方便了。constdocDefinition={footer:function(currentPage,pageCount){returncurrentPage.toString()+'of'+pageCount;},header:function(currentPage,pageCount,pageSize){return[{columns:[{text:this.headerContent.左对齐：'left'}，{text：this.headerContent.middle，alignment：'center'}，{text：this.headerContent.right，alignment：'right'}]，边距：[10,20]}]},content:["骇人听闻的代码窃贼"]};您可以精确定位某个页面并进行一些特殊设置。相对于前端，大部分的显示类型都已经定型了，比如表格、文本、列表、图片等，这些显示类型在pdfmake中提供给我们：text普通文本，需要注意的是字体，如果提供的字体不支持，则不会显示设置的属性。同时文本可以嵌套。列列，平铺列元素。pdfmake中没有块级元素的概念。如果你想平铺两个或多个文本（比如一个图标在前面，文本在后面），colums可以满足你。每列之间的距离可以通过columnGap来设置。list与html标签ul或ol相同。表格形式，唯一提供填充属性的类型。强大到可以实现任何简单的样式，相当于display:table。但是缺点也比较明显，不能垂直居中。图像/SVG图像。stack栈，相当于array[]。paddingText文本的实现是pdfmake中的一个块级元素（css思路定义）。无法实现内边距，单个文本文本占一行。constdd={content:['Firstparagraph',{text:"234",background:'red',color:"#fff",fontSize:20},'Anotherparagraph,thistimealittlebitlongertomakesure,thislinewillbedividedintoatleasttwolines']}onlytableinpdfmaketype的padding是可以实现的，那么我们可以尝试在表格中布局，比如constdd={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){return10}return20},paddingRight:function(i,node){if(i===0){return10}return20},paddingTop:function(i,node){return10},paddingBottom:function(i,node){return10}}}]}效果是：类似目录的效果也是由表做出来的：表的缺陷貌似表可以实现任何样本组合，但在单元格的垂直中心，它卡住了。{//style:'tableExample',table:{body:[['Column1','Column2Thefollowingtablehasnothingmorethanabodyarray,Thefollowingtablehasnothingmorethanabodyarray,Thefollowingtablehasnothingmorethanabodyarray,Thefollowingtablehasnothingmorethanabodyarray,Thefollowingtablehasnothingmorethanabodyarray,Thefollowingtablehasnothingmorethanabodyarray',Thefollowingtablehasnothingmorethanabodyarray','Column3'],['Atherues}}Anotherpoint不完美的是表格单元格垂直居中。除了这一点，表格非常灵活，可以实现多级表头、嵌套表格、合并单元格，还可以灵活自定义每个单元格边框线的宽度和颜色。同时，它还有水印、加密、二维码生成、内外链、目录生成等功能。与jspdf相比，它为我们节省了很多步骤。那么下次再说说jsPdf吧。本文转载自微信公众号“惊天盗码”，可通过以下二维码关注。转载本文请联系惊码盗公众号。
