pdfmark生成pdf文件并下载

最近在维护老项目时发现了生成pdf的功能，于是把这部分功能摘录下来，同时上网查询了关于pafmark资料,将这部分功能修改成可以适配vue2的写法。
预览效果：

首先npm下载插件：

npm install pdfmake

然后在所需的页面引入：

import pdfMake from "pdfmake/build/pdfmake";

生成的pdf需要配置字体文件防止乱码，
可下载字体文件：
https://download.csdn.net/download/qq_36093530/85963082
或者在下面链接的页面直接复制：
https://blog.csdn.net/qq_36093530/article/details/124997416?spm=1001.2014.3001.5501

注意：下载文件之后记得将文件格式改成js文件哦

根据文件路径，引入js字体文件：

const vfs_fonts = require('../../assets/vfs_fonts');

下面是一个相关示例，可自行对照padmark内容设置,pdfmark配置内容链接如下：

https://pdfmake.github.io/docs/0.3/document-definition-object/styling/

示例：

<template><div><button @click="downChineseFile">生成pdf</button></div>
</template>
<script>
import pdfMake from "pdfmake/build/pdfmake";
const vfs_fonts = require('../../assets/vfs_fonts');
//pdfMake.vfs = vfs_fonts;
//import vfs_fonts from '../../assets/vfs_fonts';
pdfMake.vfs = vfs_fonts.pdfMake.vfs;//配置字体
export default {data(){return{}},methods:{downChineseFile(data) {console.log(pdfMake);var self = this;try {var fileName = "接口文档";//设置文件名称//构建表var tableinfo = [["参数名", "参数类型", "参数说明"],//一个数组即是一行["code", "String", "状态码"],["message", "String", "信息"],["timestamp", "Long", "时间戳"],["success", "boolean", "是否成功"],["data", "JsonArray", "返回值"],["total", "Long", "总数"],[{//为行内字设置颜色text: "list",color: 'blue'}, {text: "object",color: 'blue'}, {text: "信息列表",color: 'blue'}],];var tabledata = [["参数名", "参数类型", "参数说明"],["code", "String", "状态码"],["message", "String", "信息"],["timestamp", "Long", "时间戳"],["success", "boolean", "是否成功"],[{text: "data",color: 'blue'}, {text: "object",color: 'blue'}, {text: "价格数据",color: 'blue'}]];var otherInfo = [[{text: "quotationList",color: 'blue'}, {text: 'JsonArray',color: 'blue'}, ""],["AVGPRI7", "String", "7日均价"],["AVGMONTHPRI", "String", "月均价"],["PRODUCER", "String", "产地"],["RAISE1", "String", "涨跌"],["AVGPRI30", "String", "30日均价"],["DATA_DATE", "String", "数据日期"],["PLACE", "String", "钢厂"],["AVGPRI10", "String", "10日均价"],["RAISE", "String", "涨跌,涨幅"],["MAR_NOTE", "String", "行情表单备注"],["DIAMETER", "String", "公称口径"],["NOTE", "String", "行备注"],["INDEX_CODE", "String", "编码"],["BREED", "String", "品名"],["SPEC", "String", "规格"],[{text: "INDEX_CODE",color: 'blue'}, {text: "String",color: 'blue'}, "编码"],[{text: "dataList",color: 'blue'}, {text: "JsonArray",color: 'blue'}, ""],["PUBLISH_TIME", "Long", "数据发布时间"],["INDEX_CODE", "String", "编码"],["DATA_DATE", "String", "数据日期"],["DATA_VALUE", "String", "数据值"]]tabledata = tabledata.concat(otherInfo);var docDefinition = {content: [{text: fileName,fontSize: 26,margin: [70, 5, 50, 5],bold: true}, //获取信息表{text: "一、获取信息",style: 'header',fontSize: 22,bold: true},{text: "请求地址：www.baidu.com" },{text: "请求heads类型：Content-Type=application/json;"},{text: "请求参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: [['参数名', '参数类型', '参数说明'],['accessTokenSign', 'String', '请求heads添加'],['pageNum', 'String', '页码'],['pageSize', 'String', '每页显示条数'],['includeInfo', 'String', '是否包含信息（与选中的字段有关）'],]}}, {text: "     "},{text: "请求示例：",fontSize: 18,bold: true},{text: "请求方式：POST"},{text: "heads添加:(注意：请删除token空格，infoOrData是单独参数)",color: 'red'},{text: "\"accessTokenSign\"=" + 'token' },{text: "\"infoOrData\"=info"},{text: "请求body:"},{text: "{\"pageNum\":1,\"pageSize\":10,\"includeInfo\":true}"},{text: "返回参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: tableinfo}}, //获取数值表{text: "     "},{text: "二、获取价格",style: 'header',fontSize: 22,bold: true},{text: "请求地址：" + 'www.baidu.com'},{text: "请求heads类型：Content-Type=application/json;"},{text: "请求参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: [['参数名', '参数类型', '参数说明'],['accessTokenSign', 'String', '请求heads添加'],['indexCodes', 'jsonArray', '编码（最多50个，必填）'],['startTime', 'String', '数据开始时间（yyyy-MM-dd，必填）'],['endTime', 'String', '数据结束时间（yyyy-MM-dd，必填）'],['order', 'String', '数据排序规则（desc/asc，必填）'],]}}, {text: "     "},{text: "请求示例：",fontSize: 18,bold: true},{text: "请求方式：POST"},{text: "heads添加:(注意：请删除token空格，infoOrData是单独参数)",color: 'red'},{text: "\"accessTokenSign\"=" + 'token'},{text: "\"infoOrData\"=data"},{text: "请求body:"},{text: "{\"indexCodes\":[\"ID00034707\"],\"order\":\"desc\",\"startTime\":\"2010-09-10\",\"endTime\":\"2020-09-10\"}"},{text: "返回参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: tabledata}}, {text: "     "},{text: "代码示例:",fontSize: 22,bold: true}, {text: "Python代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.py",color: 'blue'}, {text: "Nodejs代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.js",color: 'blue'}, {text: "Java代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.java",color: 'blue'}, {text: "C#代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.cs",color: 'blue'},],defaultStyle: {//默认字体font: '方正姚体',header: {fontSize: 22,bold: true,margin: [5, 50]},splitInfo: {fontSize: 22,color: "blue"}}};/解决复制乱码var remedyDocDefinition = {content: [{text: fileName,fontSize: 26,margin: [70, 5, 50, 5],bold: true}, //获取信息表{text: "一、获取信息",style: 'header',fontSize: 22,bold: true},{text: "请求地址：" + 'www.baidu.com'},{text: "请求heads类型：Content-Type=application/json;"},{text: "请求参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: [['参数名', '参数类型', '参数说明'],['accessTokenSign', 'String', '请求heads添加'],['pageNum', 'String', '页码'],['pageSize', 'String', '每页显示条数'],['includeInfo', 'String', '是否包含信息（与订单选中的字段有关）'],]}}, {text: "     "},{text: "请求示例：",fontSize: 18,bold: true},{text: "请求方式：POST"},{text: "heads添加:(注意：请删除token空格，infoOrData是单独参数)",color: 'red'},{text: "\"accessTokenSign\"=" + 'token'},{text: "\"infoOrData\"=info"},{text: "请求body:"},{text: "{\"pageNum\":1,\"pageSize\":10,\"includeInfo\":true}"},{text: "返回参数说明："},// {// layout: 'lightHorizontalLines', // optional// table: {//   headerRows: 1,//   widths: ['*', 'auto', '*'],//   body: []// }// }, //获取数值表{text: "     "},{text: "二、获取价格",style: 'header',fontSize: 22,bold: true},{text: "请求地址：" + 'www.baidu.com'},{text: "请求heads类型：Content-Type=application/json;"},{text: "请求参数说明："},{layout: 'lightHorizontalLines', // optionaltable: {headerRows: 1,widths: ['*', 'auto', '*'],body: [['参数名', '参数类型', '参数说明'],['accessTokenSign', 'String', '请求heads添加'],['indexCodes', 'jsonArray', '编码（最多50个，必填）'],['startTime', 'String', '数据开始时间（yyyy-MM-dd，必填）'],['endTime', 'String', '数据结束时间（yyyy-MM-dd，必填）'],['order', 'String', '数据排序规则（desc/asc，必填）'],]}}, {text: "     "},{text: "请求示例：",fontSize: 18,bold: true},{text: "请求方式：POST"},{text: "heads添加:(注意：请删除token空格，infoOrData是单独参数)",color: 'red'},{text: "\"accessTokenSign\"=" + 'token'},{text: "\"infoOrData\"=data"},{text: "请求body:"},{text: "{\"indexCodes\":[\"ID00034707\"],\"order\":\"desc\",\"startTime\":\"2010-09-10\",\"endTime\":\"2020-09-10\"}"},{text: "返回参数说明："},// {// layout: 'lightHorizontalLines', // optional// table: {//   headerRows: 1,//   widths: ['*', 'auto', '*'],//   body: []// }// },{text: "     "},{text: "代码示例:",fontSize: 22,bold: true}, {text: "Python代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.py",color: 'blue'}, {text: "Nodejs代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.js",color: 'blue'}, {text: "Java代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.java",color: 'blue'}, {text: "C#代码:"}, {text: "https://client.mysteel.com/releases/mdscode/mysteeldata.cs",color: 'blue'},],defaultStyle: {font: '方正姚体',header: {fontSize: 22,bold: true,margin: [5, 50]},splitInfo: {fontSize: 22,color: "blue"}}};pdfMake.fonts = {Roboto: {normal: 'Roboto-Regular.ttf',bold: 'Roboto-Medium.ttf',italics: 'Roboto-Italic.ttf',bolditalics: 'Roboto-Italic.ttf'},方正姚体: {normal: 'FZYTK.TTF',bold: 'FZYTK.TTF',italics: 'FZYTK.TTF',bolditalics: 'FZYTK.TTF',}};pdfMake.createPdf(docDefinition).download(fileName + ".pdf");if (tableinfo.length > 50) {pdfMake.createPdf(remedyDocDefinition).download(fileName + "-乱码解决" + ".pdf");}} catch (error) {console.log(error);}},}
}
</script>

在有接口时可配合接口返回的数据手动设置pdf内容并下载。

pdfmark生成pdf文件并下载相关推荐

前端实现生成pdf文件并下载
前端实现生成pdf文件并下载思路下载依赖使用方式备注参考思路通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文 ...
通过前端实现导出生成pdf文件并下载
通过前端实现导出生成pdf文件并下载使用 jspdf.js + html2canvas 插件,实现前端生成pdf 并下载的功能步骤如下 1.先通过npm 安装插件 npm install jspd ...
html2Canvas+JsPDF生成pdf文件并下载
采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载 1.安装html2Canvas: npm install html2canvas 2.安装JsPDF: npm in ...
freemarker 模板生成pdf文件并下载
利用freemarker 模板生成pdf文件,通过浏览器直接下载或生成文件到指定目录 1.pom.xml文件  <dependency&g ...
前端vue项目，把某个div盒子或当前页面生成pdf文件并下载。
安装依赖 1. npm install --save html2canvas // 作用是html转图片 2. npm install jspdf --save // 再将图片转为pdf 目录标题安 ...
C# 生成pdf文件客户端下载
itextsharp.dll 下载: http://sourceforge.net/projects/itextsharp/ 程序需引用:itextsharp.dll,itextsharp.pdfa. ...
安装texlive并用latex编写一段中文，最后生成pdf文件
安装texlive并用latex编写一段中文,最后生成pdf文件 **#一.下载安装(**链接https://tug.org/texlive/) ##1.第一步 ##2.第二步 ##3.第三步 ##4 ...
jsPDF生成PDF文件，文件不全问题，后台进行文件下载，前台不下载
我是前端使用jsPDF进行生成PDF文件,使用Base64进行加密,解密:后台进行文件流下载 1.前端使用jsPDF和html2canvas进行生成PDF文件(当然有这同样的毛病,生成时候有滚动条的情 ...
Java使用itextpdf生成PDF文件，用浏览器下载
浏览器下载生成PDF文件 1.引入jar包 <dependency><groupId>com.itextpdf</groupId><artifactId> ...
java导出pdf文件并下载_java根据模板生成pdf文件并导出
1.首先需要依赖包:itext的jar包,我是maven项目,所以附上maven依赖 [html] view plain copy com.itextpdf itextpdf 5.5.10 [html ...

pdfmark生成pdf文件并下载

pdfmark生成pdf文件并下载相关推荐

最新文章

热门文章