做公司网站需要有座机吗,h5游戏是什么意思,自己做视频网站流量钱,最近中国新闻事件实际项目中有时会有根据填写的表单数据或者其他格式的数据#xff0c;将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdf…实际项目中有时会有根据填写的表单数据或者其他格式的数据将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件
1.下载安装pdfmake第三方包 npm i pdfmake 2.封装生成pdf文件的共用配置
可以在utils文件夹下新建pdf文件夹所有的pdf文件模板/共用配置等文件都放在该文件夹下 新建文件pdfUtils.js该文件是一些公用配置项
import pdfMake from pdfmake/build/pdfmake;
pdfMake.fonts{Msyh:{italics: https://example.com/fonts/fontFile3.ttf,bold: https://example.com/fonts/fontFile4.ttf}//可以设置文件的字体
}
export const PdfMake pdfMake
export const baseDocDefinition{
//pdfmake中margin值的设置4个值分别是[左上右下]pageMargins:[40,70,40,40],//文档边距不影响页眉页脚pageSize: A4, //设置纸张大小为A4pageOrientation: portrait, //portrait纵向 langscape横向默认是纵向的//默认文本设置,这里的属性都是比较常见的就不赘述了defaultStyle:{font: Msyh,color: #000000,bold: false,fontSize: 12,lineHeight: 1.2}
}
//pdf展示图片不能直接展示url,需要对文件进行转换
export async function getImageUrl(url){const responseawait fetch(url)const blobawait response.blob()return new Promise((resolve,reject){const readernew FileReader()reader.onload(){const base64datareader.resultresolve(base64data)}reader.onerrorrejectreader.readAdDataURL(blob)})
}3.生成pdf文件的文件模板内容
新建getPdfDoc.js文件该文件是具体要生成文件的配置
import { PdfMake } from ./pdfUtils.js
import { baseDocDefinition, getImageUrl } from ./pdfUtils.js
//由于文件中某些数据是自动填充上去的所以调用生成pdf的方法时要传填充的数据
export function getDocPDFasync(data){const docDefinition{...baseDocDefinition,//独有配置这里可以参考文档最后content:[//独有的配置...]}PdfMake.createPDF(docDefinition).open()//生成pdf文件并打开可以进行预览/导出
}4.调用方法生成pdf
在需要的地方进行调用 例如
template
...
el-button clickexportDoc导出PDF文件/el-button
...
/template
import { getDocPDF } from /utils/getPdfDoc.js
script
export default {data(){return {form:{}}},methods:{async exportDoc(){await getDocPDF(this.form)}}
}
/scriptpdfmake的文档没有中文版的这里我列举一些我用过的也是比较常用的配置
export function getDocPDFasync(data){const docDefinition{...baseDocDefinition,//页眉header: {absolutePosition: { x: 40, y: 10 },stack: [{ text: ${data.fullName}, fontSize: 10, absolutePosition: { x: 0, y: 13 }, alignment: center },{canvas: [{type: line,x1: 0,y1: 30,x2: 515,y2: 30,lineWidth: 1,absolutePosition: { x: 0, y: 10 }}]},// 分割线],},//页脚footer: function (currentPage, pageCount) {return [{canvas: [{type: line,x1: 40, y1: 0,x2: 555, y2: 0,lineWidth: 1}]},{text: ${data.fullName}\n currentPage,alignment: center,fontSize: 10,margin: [0, 10]}];},content:[//独有的配置...,//文本段落{text:***,fontSize:16,//该段text的字体大小bold:true,//该段字体加粗lendingIndent: 25//首行缩进},//表格{layout:{paddingTop: () 5,paddingBottom: () 5,paddingLeft: () 5,paddingRight: () 5},table: {widths: [10%, 22%, 20%, 30%, 20%],body: [[//第一行的数据即表格的表头{ text: 序号, alignment: center },{ text: 姓名, alignment: center },{ text: 手机号, alignment: center },{ text: 性别, alignment: center },],//后面的数据行如果不是静态的数据传入的数据展示我们可能还需要进行一下转换转换成这里展示需要的数据格式[{ text: 1, alignment: center },{ text: 张三, alignment: center },{ text: 18888888888, alignment: center },{ text: 男, alignment: center },],]}},//左右布局{alignment: justify,margin: [0, 20, 0, 5],columns: [{//text可以直接是字符串也可以是字符串数组text: [签字日期,\u00A0\u00A0\u00A0\u00A0,年,\u00A0\u00A0\u00A0\u00A0,月,\u00A0\u00A0\u00A0\u00A0,日//这里的\u00A0是导出来展示是空格],fontSize: 12},{text: 签字日期,\u00A0\u00A0\u00A0\u00A0,年,\u00A0\u00A0\u00A0\u00A0,月,\u00A0\u00A0\u00A0\u00A0,日,fontSize: 12}]},//如果需要换页即下面的内容为新起一页的内容可以通过给文本块加上pageBreak属性{text: ,pageBreak:after,//表示该文本块后换页},//如果需要展示像图片或者文本块较多要放在stack中图片不能直接展示url要进行格式转换stack:[{image: await getImageUrl(data.url)width: 200,}]]}PdfMake.createPDF(docDefinition).open()//生成pdf文件并打开可以进行预览/导出
}页眉效果 页脚效果
