前端vue导出PPT，使用pptxgen.js

前言

公司新需求需要导出ppt给业务用，查阅资料后发现也挺简单的，记录一下。

如有不懂的可以留言！！！

ppt PPT

1.安装包

npm install pptxgenjs --save

2.引入包

在需要使用的文件中引入

import Pptxgenfrom "pptxgenjs"

导出事件

 <Button  type="primary"  @click="exportPPT">导出周报</Button>

这里有几个注意点说一下

  • slide 当前PPT页，可以通过addText(),addTable()等方法在当前页面添加文字、图表、图片等元素
  • Text 文字，可以对ppt文字颜色、字体大小、字体阴影、背景颜色、文字位置等属性进行配置，达到自己想要的效果
  • Table 表格， 可以添加ppt表格，但是表格内只能放文字和数字
  • Charts 图表 图表，可以支持常见的饼状图、柱状图、折线图等，配置项也挺全的，横纵坐标，legend等啥都有，基本可以满足常用。

ppt

3.使用

js代码

exportPPT() {// 1. 创建PPTconst pres = new Pptxgen()// 2. 创建一个PPT页面，每调用一次 pres.addSlide() 都可以生成一张新的页面// 建议把每个页面的构造抽成一个个函数，然后通过函数调用生成新页面，代码不会很乱const slide = pres.addSlide()// 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”// 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……// 关于坐标长度与px的转换 x 1 = 127~128px 左右slide.addText('需求进度', {x: 0.2, // 横坐标y: 0.4,color: '363636',fontSize: 24, // 字号fill: { color: 'F1F1F1' },align: 'left'})const rows = []// Row One: cells will be formatted according to any options provided to `addTable()`rows.push(['序号', '需求标题', '预计发版时间', '完成时间', '进度情况', '备注'])const border = [ // 表格边框{ pt: 0.5, color: '#4f4f4f' },{ type: 'none' },{ pt: 0.5, color: '#4f4f4f' },{ type: 'none' }]const options = { valign: 'middle', border: border, color: '0000ff' }	// 单元格样式配置// Row Two: set/override formatting for each cellrows.push([{ text: '1', options },{ text: '对接小包物流商：京东国际=获取包裹轨迹状态', options },{ text: '2023-11-02 00:00:00', options },{ text: '2023-11-12 00:00:00', options },{ text: '开发中', options },{ text: '备注哦', options }], [{ text: '2', options },{ text: '对接小包物流商：邦递国际 BDGJ', options },{ text: '2023-11-22 00:00:00', options },{ text: '2023-11-15 00:00:00', options },{ text: '已上线', options },{ text: '测试', options }])slide.addTable(rows,{x: 0.5,y: 1.0,w: 9.0,h: 3,fontSize: 16,colW: [0.75, 2.0, 0.85, 0.8], // 表格每一列宽度rowH: 0.31, // 单元格默认高度color: '363636'})// EX B: Pass the same objects as a cell's `text` valueconst arrTabRows = [[{ text: 'Cell 1 A', options: { fontFace: 'Arial' } },{ text: 'Cell 1 B', options: { fontFace: 'Courier' } }]]slide.addTable(arrTabRows, { x: 0.5, y: 4.5, w: 9, h: 1, colW: [1.5, 1.5, 6] })const slide2 = pres.addSlide()// 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”// 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……// 关于坐标长度与px的转换 x 1 = 127~128px 左右slide2.addText('Amazon平台', {x: 0.4, // 横坐标y: 0.4,color: '363636',fontSize: 24, // 字号fill: { color: 'F1F1F1' },align: 'center'})slide2.addText('2023-10-01至2023-10-07主要国家发货发布', {x: 0.5, // 横坐标y: 0.8,color: '363636',fontSize: 24, // 字号fill: { color: 'F1F1F1' },align: 'center'})// let pres = new pptxgen();const dataChartAreaLine = [{name: '菜鸟-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789]},{name: '菜鸟-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789]},{name: '顺友-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]},{name: '顺友-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]},{name: '燕文-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]},{name: '燕文-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]}]slide2.addChart(pres.ChartType.bar, dataChartAreaLine,{x: 0.6,y: 1.2,w: 8,h: 3.5,title: 'Amazon平台' // 标题})const tempResult3 = '英国上涨5%，德国上涨10%，法国上涨12%，意大利上涨6%，西班牙上涨10%，XXXXX'slide2.addText(tempResult3, {x: 0.5, // 横坐标y: 5.2,color: '363636',fontSize: 18, // 字号fill: { color: 'F1F1F1' },align: 'center'})const slide3 = pres.addSlide()// 3. 调用addTetx()，在PPT页面中插入文字“Hello World from PptxGenJS...”// 括号里面是对文字的配置，文字横坐标x为1.5，纵坐标y为1.5，字体颜色 363636……// 关于坐标长度与px的转换 x 1 = 127~128px 左右slide3.addText('SMT平台', {x: 0.5, // 横坐标y: 0.5,color: '363636',fontSize: 24, // 字号fill: { color: 'F1F1F1' },align: 'center'})// let pres = new pptxgen();const dataChartAreaLine3 = [{name: '菜鸟-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [4500, 4000, 3156, 3167, 8510, 8009, 6006, 7855, 11102, 12789]},{name: '菜鸟-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [3000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789]},{name: '顺友-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]},{name: '顺友-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]},{name: '燕文-平邮',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]},{name: '燕文-挂号',labels: ['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]}]slide3.addChart(pres.ChartType.bar, dataChartAreaLine3,{ x: 0.8, y: 1, w: 8, h: 3 })const rows3 = []// Row One: cells will be formatted according to any options provided to `addTable()`rows3.push(['美国', '英国', '德国', '法国', '意大利', '西班牙', '加拿大', '墨西哥', '巴西'])// const border3 = [ // 表格边框//   { pt: 0.5, color: '#4f4f4f' },//   { type: 'none' },//   { pt: 0.5, color: '#4f4f4f' },//   { type: 'none' }// ]// const options = { valign: 'middle', border: border3, color: '0000ff' }	// 单元格样式配置// Row Two: set/override formatting for each cell// options 这个options是上面公用的，如果不共用，单独拉一个rows3.push([{ text: '1500', options },{ text: '4600', options },{ text: '5156', options },{ text: '3167', options },{ text: '3167', options },{ text: '3167', options },{ text: '3167', options },{ text: '3167', options },{ text: '3167', options }], [{ text: '1500', options },{ text: '3600', options },{ text: '5156', options },{ text: '1167', options },{ text: '3167', options },{ text: '2167', options },{ text: '3167', options },{ text: '4167', options },{ text: '3167', options }])slide3.addTable(rows3,{x: 1.2,y: 4,w: 8.0,h: 1.5,fontSize: 12,colW: [0.75, 2.0, 0.85, 0.8], // 表格每一列宽度rowH: 0.25, // 单元格默认高度color: '363636'})slide3.addText('总计', {x: 0.6, // 横坐标y: 4.5,color: '363636',fontSize: 12, // 字号fill: { color: 'F1F1F1' },align: 'left'})slide3.addText('其它', {x: 0.6, // 横坐标y: 4.9,color: '363636',fontSize: 12, // 字号fill: { color: 'F1F1F1' },align: 'left'})pres.author = '作者_abin'pres.company = '公司'// 4. 生成PPT， 括号中的fileName，就是生成的 PPT名字，可以使用 .then 或者 .catch处理对应事件。pres.writeFile({ fileName: '20231124周报6.2.pptx' }).then(() => {this.$Message.success('导出成功')})},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/216182.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【计算机网络】（网络层）定长掩码和变长掩码

【计算机网络】（网络层）定长掩码和变长掩码

目录 1、IPV4地址的应用规划 2、例题分析 2.1、定长的子网掩码 2.2、变长的子网掩码 1、IPV4地址的应用规划 定长的子网掩码&#xff08;FLSM&#xff09;&#xff1a; 使用同一个子网掩码划分子网&#xff0c;每个子网所分配的IP地址数量相同&#xff0c;造成IP地址的浪费…
阅读更多...
小辰的智慧树（差分+前缀和）

小辰的智慧树（差分+前缀和）

登录—专业IT笔试面试备考平台_牛客网 1.考虑总长度之和不能超过m&#xff0c;2考虑限制每棵树高度不能低于ci&#xff0c;如果用二分最短输能截到的高度&#xff0c;还要另外去判断&#xff0c;是否每棵树mid都能严格大于ci &#xff0c;这样容易超时&#xff0c;换个角度&…
阅读更多...
DFS序和欧拉序的降维打击

DFS序和欧拉序的降维打击

1. DFS 序和时间戳 1.1 DFS 序 定义&#xff1a;树的每一个节点在深度优先遍历中进、出栈的时间序列。 如下树的 dfs 序就是[1,2,8,8,5,5,2,4,3,9,9,3,6,6,4,7,7,1]。 下图为生成DFS的过程。对于一棵树进行DFS序&#xff0c;除了进入当前节点时对此节点进行记录&#xff0c;…
阅读更多...
Chem. Eng. J | 掌控基于ESIPT的AIE效应设计具有单组分白光发射的光学材料

Chem. Eng. J | 掌控基于ESIPT的AIE效应设计具有单组分白光发射的光学材料

今天为大家介绍一篇近期发表在Chemical Engineering Journal上的论文&#xff1a;Controlling ESIPT-based AIE effects for designing optical materials with single-component white-light emission。论文通讯作者为中南大学董界副教授和曾文彬教授&#xff0c;论文第一作者…
阅读更多...
使用new Vue()的时候发生了什么？

使用new Vue()的时候发生了什么？

前言 Vue.js是一个流行的JavaScript前端框架&#xff0c;用于构建单页面应用&#xff08;SPA&#xff09;和用户界面。当我们使用new Vue()来创建一个Vue实例时&#xff0c;Vue会执行一系列的初始化过程&#xff0c;将数据变成响应式&#xff0c;编译模板&#xff0c;挂载实例…
阅读更多...
StarRocks Evolution：One Data，All Analytics

StarRocks Evolution：One Data，All Analytics

在 11 月 17 日举行的 StarRocks Summit 2023上&#xff0c;StarRocks TSC Member、镜舟科技 CTO 张友东详细介绍了 StarRocks 社区的发展情况&#xff0c;并全面解析了 StarRocks 的核心技术与未来规划&#xff1b;我们特意将他的精彩演讲整理出来&#xff0c;以帮助大家更深入…
阅读更多...
修改mysql的密码（每一步都图文解释哦）

修改mysql的密码（每一步都图文解释哦）

当你想要连接本机数据库时&#xff0c;是不是有可能突然忘记了自己的数据库密码? 在此文中&#xff0c;我们来详细解决一下如何去修改自己的数据库密码&#xff0c;并使用Navicat来连接测试 1.停止mysql服务 打开终端&#xff0c;键入命令,将mysql服务先停止掉&#xff0c;…
阅读更多...
一起学docker系列之九docker运行mysql 碰到的各种坑及解决方法

一起学docker系列之九docker运行mysql 碰到的各种坑及解决方法

目录 前言1 Docker 运行mysql命令2 坑一&#xff1a;无法读取/etc/mysql/conf.d目录的问题3 坑二&#xff1a;/tmp/ibnr0mis 文件无法创建/写入的问题4 坑三&#xff1a;Navicat 连接错误&#xff08;1045-access denied&#xff09;5 坑四&#xff1a;MySQL 登录失败问题结语 …
阅读更多...
新版PY系列离线烧录器，支持PY002A/002B/003/030/071等MCU各封装，不同 FLASH 大小型号

新版PY系列离线烧录器，支持PY002A/002B/003/030/071等MCU各封装，不同 FLASH 大小型号

PY系列离线烧录器&#xff0c;目前支持PY32F002A/002B/002/003/030/071/072/040/403/303 各封装、不同 FLASH 大小型号。PY离线烧录器需要搭配上位机软件使用&#xff0c;上位机软件可以在芯岭技术官网上下载&#xff0c;还包括了离线烧录器的使用说明。PY离线烧录器使用MINI U…
阅读更多...
NX二次开发UF_CURVE_ask_joined_parms 函数介绍

NX二次开发UF_CURVE_ask_joined_parms 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_joined_parms Defined in: uf_curve.h int UF_CURVE_ask_joined_parms(tag_t joined_curve_feature, UF_STRING_p_t uf_curve_string, int * creation_method, double …
阅读更多...
EI期刊完整程序：MEA-BP思维进化法优化BP神经网络的回归预测算法，可作为对比预测模型，丰富内容，直接运行，免费

EI期刊完整程序：MEA-BP思维进化法优化BP神经网络的回归预测算法，可作为对比预测模型，丰富内容，直接运行，免费

适用平台&#xff1a;Matlab 2020及以上 本程序参考中文EI期刊《基于MEA⁃BP神经网络的建筑能耗预测模型》&#xff0c;程序注释清晰&#xff0c;干货满满&#xff0c;下面对文章和程序做简要介绍。 适用领域&#xff1a;风速预测、光伏功率预测、发电功率预测、碳价预测等多…
阅读更多...
模板初阶(1)：函数模板，类模板

模板初阶(1)：函数模板，类模板

一、函数模板 1.1 概念 函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的特定类型版本。 格式&#xff1a; template <typename T>或template <class T> template <class T>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023