前端vue导出PPT,使用pptxgen.js
前言
公司新需求需要导出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等啥都有,基本可以满足常用。

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('导出成功')})},
相关文章:
前端vue导出PPT,使用pptxgen.js
前言 公司新需求需要导出ppt给业务用,查阅资料后发现也挺简单的,记录一下。 如有不懂的可以留言!!! 1.安装包 npm install pptxgenjs --save2.引入包 在需要使用的文件中引入 import Pptxgenfrom "pptxgenjs&…...
JSP过滤器和监听器
什么是过滤器 Servlet过滤器与Servlet十分相似,但它具有拦截客户端(浏览器)请求的功能,Servlet过滤器可以改变请求中的内容,来满足实际开发中的需要。 对于程序开发人员而言,过滤器实质就是在Web应用服务…...
pcl+vtk(十二)使用vtkPolyData创建点、线、面(不规则面)、三角带
一、前言 vtkPlaneSource创建平面,只可以创建平行四边形的平面,根据一个起点和两个终点创建法向量创建平面。但是当有创建多个点围成不规则平面的需求时,该怎么创建显示呢? 在网上查了资料,可以使用vtkPolyData拓扑结…...
51单片机的智能浇花系统【含proteus仿真+程序+报告+原理图】
1、主要功能 该系统由AT89C51单片机LCD1602显示模块DHT11温湿度模块DS1302时间模块继电器驱动水泵模块光敏传感器等模块构成。适用于智能浇花、自动浇花、智能盆栽等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、土壤温湿度、光照强度等信息 2、DHT11采集温湿度信…...
为什么 MQTT 对于构建联网汽车至关重要
汽车行业正在接受构建联网汽车的想法。他们看到了利用车辆遥测数据创造新收入机会并打造更好用户体验的机会。然而,实施可扩展以支持数百万辆汽车的联网汽车服务可能会带来一些挑战。 对于大多数联网汽车服务,汽车和云之间需要进行双向通信。汽车将遥测…...
CSIT883系统分析与项目管理——Lecture2重点概念
一、前言 这个是本人的学习笔记,如果大家喜欢可以多多关注吧! 二、重点概念 1.项目经理及其团队必须认识到任何项目对整个系统或组织的利益和需求的影响,而不是关注项目的直接问题。 2.系统愿景文件的目的是什么? 系统愿景文档是描述问题、解决方案、系统目标等的简短声…...
【linux】基本指令(中篇)
echo指令 将引号内容打印到显示屏上 输出的重定向 追加的重定向 输出的重定向 我们学习c语言的时候当以写的方式创建一个文件,就会覆盖掉该文件之前的内容 当我们以追加的方式打开文件的时候,原文件内容不会被覆盖而是追加 more指令 10.more指令…...
Centos Download
前言 CentOS Linux 是一个社区支持的发行版,源自 CentOS git for Red Hat Enterprise Linux (RHEL) 上免费提供给公众的源代码。因此,CentOS Linux 的目标是在功能上与 RHEL 兼容。CentOS 计划主要更改组件以删除上游供应商的品牌…...
k8s集群资源监控工具metrics-server安装
1、下载镜像 docker pull swr.cn-east-2.myhuaweicloud.com/kuboard-dependency/metrics-server:v0.6.22、在任一一个主节点上创建角色,执行下面语句 kubectl create clusterrolebinding kube-proxy-cluster-admin --clusterrolecluster-admin --usersystem:kube-…...
物流单打印模板下载,佳易王物流托运单打印软件
物流单打印模板下载,佳易王物流托运单打印软件 上图是常用的物流单打印模板,佳易王物流单打印软件打印格式可以根据需要定制更改。 软件特色: 1、功能实用,操作简单,不会电脑也会操作,软件免安装ÿ…...
TrustAsia亮相Matter开发者大会,荣获Matter优秀赋能者奖
11月22日,由CSA(连接标准联盟)中国成员组主办,CSHIA承办的“Matter中国区开发者大会2023” 于杭州举行。 会上,连接标准联盟中国成员组主席宿为民博士、连接标准联盟亚洲区架构师杨莉女士、CSHIA秘书长|中智盟投资创始…...
java 事务提交(批量处理数据,单个批次执行完成后直接提交事务)
方法一:接口REQUIRES_NEW 实现单个事务提交 方式1: for (TIrBuPBom buPBom : batchList) {// 查询待处理的批次数据List<TIrBuPBom> pBomList pBomMapperBase.list(new LambdaQueryWrapper<TIrBuPBom>().eq(TIrBuPBom::getBatchNo, buPBom.getBatchNo…...
logging.config 日志模块
logging 日志模块 简单应用: import logging logging.warning(警告!) # 输出结果: WARNING:root:警告!1. 日志等级 - debug 调试 10 最详细的日志信息,典型应用场景是 问题诊断 - info 普通信息 20 信息详细…...
win10+ vs2017用cmake编译geos3.5.1
参考教程:使用CMake编译Geos3.5.0_cmake geos-CSDN博客 注意事项: 报错:在使用cmake编译geos-3.5.1的时候,会出现报错: CMake Error at CMakeLists.txt:330 (include): include could not find load file GenerateSou…...
优化数据分析——理解与运用各类指标
写在开头 数据分析在当今信息时代扮演着至关重要的角色,而指标则是我们理解数据、揭示模式、支持决策的关键工具。本文将深入讨论各类指标的应用场景和解读方法,以帮助更全面、深入地理解数据。 1. 中心趋势指标 1.1 均值:更深层次的理解 …...
JS实现数字千分位分割(手写纯享版)
简介 在前端开发中,我们经常需要对数字进行格式化,其中一种常见的需求就是将数字表示为千分位格式,以提高可读性。本文将介绍如何使用 JavaScript 实现一个简单而有效的千分位格式化函数。 千分位格式化的需求 千分位格式化是一种将数字中…...
入门指南:介绍Python库——Pandas
个人网站 本文首发于公众号小肖学数据分析 Pandas是一个功能强大、灵活易用的Python数据处理库。 无论你是数据分析师、数据科学家还是Python初学者,掌握Pandas都将为你提供高效、便捷的数据处理和分析能力。 本文将为你详细介绍Pandas的基本概念、常用功能和使…...
数据库语句执行流程(查询原理)SQL
SQL作为一种数据库编程语言,其执行过程大致为,终端上输入SQL语句 会传输到数据库服务器,然后SQL语句在服务器内经过解析器的检查和翻译,优化器的执行效率提升,在执行器中通过存储引擎提供的数据给出结果。详细过程如下…...
FileReader与URL.createObjectURL实现图片、视频上传预览
之前做图片、视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览。实际上这只是文件“上传后再预览”,这既浪费了用户的时间,也…...
基于python+Django+SVM算法模型的文本情感识别系统
欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介1. 简介2. 技术栈3. 系统架构4. 关键模块介绍5. 如何运行 二、功能三、系统四. 总结 一项目简介 # 基于 Python Django SVM 算法模型的文本情感识别系统介…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
