pdfmark生成pdf文件并下载

已于 2022-07-29 10:47:23 修改
阅读量2.1k 收藏 7
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 vue pdfmark 文章标签： javascript 前端
于 2022-05-27 09:37:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36093530/article/details/124997162

最近在维护老项目时发现了生成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', // optional
                  table: {
                    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: tableinfo
                  }
                }, //获取数值表
                {
                  text: "     "
                },
                {
                  text: "二、获取价格",
                  style: 'header',
                  fontSize: 22,
                  bold: true
                },
                {
                  text: "请求地址：" + 'www.baidu.com'
                },
                {
                  text: "请求heads类型：Content-Type=application/json;"
                },
                {
                  text: "请求参数说明："
                },
                {
                  layout: 'lightHorizontalLines', // optional
                  table: {
                    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: 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', // optional
                  table: {
                    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', // optional
                  table: {
                    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内容并下载。

java生成带书签的pdf,Java 添加、更新、获取、删除PDF中的书签
weixin_42134094的博客
03-22 742
Spire.Cloud.SDK for Java WebAPI提供了pdfBookmarkApi接口可用于添加书签addBookmark()、更新书签updateBookmark()、获取书签信息getBookmarksInfo()、以及删除书签deleteBookmarks()，下面将通过具体操作步骤和Java代码示例来展示如何实现以上操作要求。一、导入jar文件创建Maven项目程序，通过ma...
使用 Spire.Pdf 生成书签但是有 Evaluation Warning : The document was created with Spire.PDF for .NET.
热门推荐
Du_XiaoHong的博客
09-03 1万+
使用 Spire.Pdf 生成书签但是有 Evaluation Warning : The document was created with Spire.PDF for .NET.字样 这里用到了两个插件  Spire.Pdf 与 iTextSharp 请在 NuGet 下载安装 由于使用  Spire.Pdf 生成的书签带有 Evaluation Warning : The documen...
pdfmake实现导出中文pdf无乱码文件
03-23
该资源包使用 pdfmake实现导出中文pdf无乱码文件。资源包中包含：test.html、pdfmake.min.js、方正vsf_fonts.js 三个文件。下载资源包后，解压，直接打开test.html文件，即可在浏览器点击下载，导出中文无乱码的pdf文件。
vfs_fonts.js和pdfmake.min.js 生成pdf文件
02-13
生成pdf文件
【4核8内存搞定】Marker 将 PDF 转换为 Markdown 文档(支持word等结构)
最新发布
Gothehell的博客
05-06 1301
Marker 是一个基于多模型推理、OCR、LLM 增强的 PDF 转换工具。✏️ 将 PDF 转换为结构化 Markdown 文件📝 支持图像类 PDF 的 OCR（光学字符识别）✨ 支持使用大型语言模型（LLM）来优化段落分块、标题判断、排版🌐 支持多语言：英文、中文（简繁）、法语等🔍 支持表格识别、数学公式识别。
使用pdfmake导出pdf文件
weixin_44239362的博客
11-01 2132
在项目的node_modules文件夹下找到pdfmake，在pdfmake目录下新建。在build文件夹下会生成 vfs_fonts.js文件，里面有我们需要用的字体。在pdfmake目录下执行。字体，放到刚刚新建的。
推荐一款高效PDF水印神器：MarkPDF
gitblog_00036的博客
06-10 728
推荐一款高效PDF水印神器：MarkPDF 项目地址:https://gitcode.com/gh_mirrors/ma/markpdf 在处理PDF文件时，有时我们需要为文档添加水印以表明版权或进行版本标识。如果你正在寻找一个简单易用、快速高效的命令行工具来完成这一任务，那么【MarkPDF】就是你的理想选择。 项目介绍 MarkPDF是一个小巧的命令行工具，能够用图像或文本轻松地为PDF文件添...
pdfmake生成pdf的使用
weixin_46394325的博客
09-09 2097
pdfmake生成pdf文件的包的使用
markpdf - 一个简单的PDF水印添加工具
gitblog_00712的博客
12-26 360
markpdf - 一个简单的PDF水印添加工具 markpdf Watermark PDF files using image or text 项目地址: https://gitcode.com/gh_mirrors/ma/ma...
pdfmake生成pdf文件
qq_39522549的博客
08-27 2252
源码下载 github地址 gitee镜像地址 确定下载那个版本的，我下载的是0.1分支的。 git clone -b 0.1 https://gitee.com/mirrors/pdfmake/ 代码结构 使用gulp进行构建。 dev-playground是一个网站，运行起来可以看到pdfmake的一些配置示例。 src源码 examples是示例代码，node端用。（一般这种库，会考虑node和浏览器两种运行环境的问题） build 项目构建输出文件。 然后就是各种工具的配置文件和项目说明文件
PDFlib块列表字典详解：版本6.0.3电子管功放设计关键项
块列表字典是一个数据结构，由PDFlib开发的动态生成PDF文件的程序库——PDFlib来实现。PDFlib是一款跨平台的库，支持多种编程语言，如Cobol、C++、Java等，用于生成高质量的PDF文档。 在块列表字典中，每一项都包含...
pdfmake:纯 JavaScript 客户端/服务器端 PDF 打印-开源
07-17
直接在浏览器中打印 PDF 或将其委托给您的 NodeJS 后端。 在这两种情况下使用相同的文档定义。 忘记手动 x, y 计算。 声明文档结构，让 pdfmake 完成剩下的工作。 使用段落、列、列表、表格、画布等。声明自己的样式，使用自定义字体，构建 DSL 并扩展框架。 提供一组选项以禁用字体布局缓存并控制何时将页面刷新到输出文件。 Pdfmake 可在浏览器（客户端）和 Node.js（服务器端）中运行。 PDF 名称只能通过使用元数据标题属性来定义。 浏览器中使用的附加组件会影响 pdfmake 的功能（尤其是 open() 和 print()）。 如果 pdfmake 不起作用，请尝试在浏览器中禁用加载项。 支持的浏览器包括 Internet Explorer 10+、Edge 12+、Firefox、Chrome、Opera 和 Safari。
PDFmake(解决jspdf不支持中文的问题)
06-25
PDF
markpdf:一个将 Markdown 文本转换为 PDF 的程序
08-04
马克PDF MarkPDF 是一个将 Markdown 文件转换为 PDF 的程序 警告：图片必须在当前目录下，如assets/image.png，请不要使用外部图片链接，下载后放在当前目录下。 Mpdf（MarkPDF 配置文件） 创建主题 主题列表 安装 使用你的包管理器安装 Node，比如sudo apt install nodejs 要安装 MarkPDF，请使用： npm install -g markpdf 例子 要在 MarkPDF 的 PDF 中查看此自述文件，请单击此处 用法 要快速使用 MarkPDF，输入markpdf和您的 Markdown 文件，很简单。 markpdf myExemple.md 使用主题 要使用个性化主题，请使用-t或--theme参数附加您的主题文件名，例如： markpdf myExemple.md -t myThem
gsSetInitialView:在 Windows 上使用 Ghostscript 设置 PDF 初始视图的 GUI-开源
06-07
GUI 允许用户选择初始视图设置（导航窗格、页面布局、缩放等），生成相应 PostScript 代码片段 (pdfmark)，然后运行 ​​Ghostscript 命令行程序将 pdfmark 应用到 PDF文件。 操作系统：Windows。 作者：大卫·金。...
hyperref:对LaTeX的超文本支持
05-03
为HyperTeX dvi处理器，嵌入式pdfmark命令（由Acrobat Distiller处理（dvips和dvipsone），dviwindo，pdfTeX，dvipdfm，TeX4ht，TeX4ht，VTEX的pdf和HTML后端）定义的\special集有后端。 包括： hyperref主要的...
推荐开源项目：pdfmake - 纯JavaScript的PDF文档生成库
gitblog_00052的博客
05-10 1339
推荐开源项目：pdfmake - 纯JavaScript的PDF文档生成库 项目地址:https://gitcode.com/gh_mirrors/pd/pdfmake 在这个数字化的时代，我们经常需要生成或处理PDF文档。而pdfmake是一个卓越的开源项目，它允许在服务器端和客户端以纯JavaScript的方式生成PDF文档，无需依赖任何其他软件。 1、项目介绍 pdfmake是一个功能强大的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值