前端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.mzph.cn/news/167883.shtml

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

相关文章

Oracle研学-介绍及安装

Oracle研学-介绍及安装

一 ORACLE数据库特点: 支持多用户&#xff0c;大事务量的事务处理数据安全性和完整性控制支持分布式数据处理可移植性(跨平台&#xff0c;linux转Windows) 二 ORACLE体系结构 数据库&#xff1a;oracle是一个全局数据库&#xff0c;一个数据库可以有多个实例&#xff0c;每个…
阅读更多...
nodejs+vue＋python＋PHP+微信小程序-留学信息查询系统的设计与实现-安卓-计算机毕业设计

nodejs+vue＋python＋PHP+微信小程序-留学信息查询系统的设计与实现-安卓-计算机毕业设计

1、用户模块&#xff1a; 1&#xff09;登录&#xff1a;用户注册登录账号。 2&#xff09;留学查询模块&#xff1a;查询学校的入学申请条件、申请日期、政策变动等。 3&#xff09;院校排名&#xff1a;查询国外各院校的实力排名。 4&#xff09;测试功能&#xff1a;通过入学…
阅读更多...
python-选择排序

python-选择排序

选择排序是一种简单直观的排序算法&#xff0c;它的基本思想是每一轮选择未排序部分的最小元素&#xff0c;然后将其放到已排序部分的末尾。这个过程持续进行&#xff0c;直到整个数组排序完成。(重点&#xff1a;通过位置找元素) 以下是选择排序的详细步骤和 Python 实现&…
阅读更多...
HarmonyOS应用开发实战—登录页面【ArkTS】

HarmonyOS应用开发实战—登录页面【ArkTS】

文章目录 本页面实战效果预览图一.HarmonyOS应用开发1.1HarmonyOS 详解1.2 ArkTS详解二.HarmonyOS应用开发实战—登录页面【ArkTS】2.1 ArkTS页面源码2.2 代码解析2.3 心得本页面实战效果预览图 一.HarmonyOS应用开发 1.1HarmonyOS 详解 HarmonyOS（鸿蒙操作系统）是华为公司…
阅读更多...
js粒子效果(一)

js粒子效果(一)

效果: 代码: <!doctype html> <html> <head><meta charset"utf-8"><title>HTML5鼠标经过粒子散开动画特效</title><style>html, body {position: absolute;overflow: hidden;margin: 0;padding: 0;width: 100%;height: 1…
阅读更多...
DELL MD3600F存储重置管理软件密码

DELL MD3600F存储重置管理软件密码

注意&#xff1a;密码清除可能会导致业务秒断&#xff0c;建议非业务时间操作 针对一台控制器操作即可&#xff0c;另一控制器会同步操作 重置后密码为空&#xff01; 需求&#xff1a;重置存储管理软件密码 管理软件中分配物理磁盘时提示输入密码(类似是否了解风险确认操作的提…
阅读更多...
io.lettuce.core.RedisCommandExecutionException

io.lettuce.core.RedisCommandExecutionException

io.lettuce.core.RedisCommandExecutionException: ERR invalid password ERR invalid password-CSDN博客 io.lettuce.core.RedisCommandExecutionException /** Copyright 2011-2022 the original author or authors.** Licensed under the Apache License, Version 2.0 (the…
阅读更多...
Rust UI开发（一）：使用iced构建UI时，如何在界面显示中文字符

Rust UI开发（一）：使用iced构建UI时，如何在界面显示中文字符

注&#xff1a;此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库&#xff0c;用于为rust语言程序构建UI界面。 iced的基本逻辑是&#xff1a; UI交互产生消息message&#xff0c;message传递给后台的update&#xff0c;在这个函数中编写逻辑&#xff0c;然后通过…
阅读更多...
2023-11-24--oracle--实验--[Merge 语句]

2023-11-24--oracle--实验--[Merge 语句]

oracle--实验---Merge语句 1.认知Merge 语句 • merge 语句是 sql 语句的一种。在 SQL server 、 Oracle 数据库中可用&#xff0c; MySQL 中不可用。 • merge 用来合并 update 和 insert 语句。目的&#xff1a;通过 merge 语句&#xff0c;根据一张表&#xff08; 原数据表…
阅读更多...
AT360-6T GNSS 单频高精度授时模块特性参数

AT360-6T GNSS 单频高精度授时模块特性参数

AT360-6T 模块具有高灵敏度、低功耗、低cost等优势&#xff0c;可以满足电力授时&#xff0c;通信授时等领域的应用。AT360-6T特点&#xff1a; 1.支持北斗二代/北斗三代信号 2.高精度授时 3.可靠性授时 实时高精度授时 AT360-6T 系列模块的授时秒脉冲抖动可以达到 10ns&am…
阅读更多...
杰发科技AC7801——ADC软件触发的简单使用

杰发科技AC7801——ADC软件触发的简单使用

前言 7801资料读起来不是很好理解&#xff0c;大概率是之前MTK的大佬写的。在此以简单的方式进行描述。我们做一个简单的规则组软件触发Demo。因为规则组通道只有一个数据寄存器&#xff0c;因此还需要用上DMA方式搬运数据到内存。 AC7801的ADC简介 7801的ADC是一种 12 位 逐…
阅读更多...
洛谷P1157组合的输出 递归：我他又来辣

洛谷P1157组合的输出 递归：我他又来辣

没没没没没没没错&#xff0c;这是一道简单的递归&#xff08;其实是深搜加回溯) 我不管&#xff0c;我说是递归就是递归。 上题干&#xff1a; 题目描述 排列与组合是常用的数学方法&#xff0c;其中组合就是从 n 个元素中抽出 r个元素&#xff08;不分顺序且 r≤n&#x…
阅读更多...
大数据技术之数据安全与网络安全——CMS靶场实训

大数据技术之数据安全与网络安全——CMS靶场实训

大数据技术之数据安全与网络安全——CMS靶场实训 在当今数字化时代&#xff0c;大数据技术的迅猛发展带来了前所未有的数据增长&#xff0c;同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全&#xff0c;并通过CMS&a…
阅读更多...
C语言-指针讲解(3)

C语言-指针讲解(3)

文章目录 1.字符指针变量1.1 字符指针变量类型是什么1.2字符指针变量的两种使用方法&#xff1a;1.3字符指针笔试题讲解1.3.1 代码解剖 2.数组指针变量2.1 什么是数组指针2.2 数组指针变量是什么&#xff1f;2.2.3 数组指针变量的举例 2.3数组指针和指针数组的区别是什么&#…
阅读更多...
npm ERR! node-sass@4.13.0 postinstall: `node scripts/build.js`

npm ERR! node-sass@4.13.0 postinstall: `node scripts/build.js`

npm ERR! node-sass4.13.0 postinstall: node scripts/build.js npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass npm install npm run dev Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。C:\Users\Administr…
阅读更多...
4.操作系统常见面试题（2）

4.操作系统常见面试题（2）

3.4 虚拟内存 直接使⽤物理内存会产⽣⼀些问题 1. 内存空间利⽤率的问题&#xff1a;各个进程对内存的使⽤会导致内存碎⽚化&#xff0c;当要⽤ malloc 分配⼀块很⼤的内存空间时&#xff0c;可能会出现虽然有⾜够多的空闲物理内存&#xff0c;却没有⾜够⼤的连续空闲内存这种…
阅读更多...
手动实现 git 的 git diff 功能

手动实现 git 的 git diff 功能

这是 git diff 后的效果&#xff0c;感觉挺简单的&#xff0c;不就是 比较新旧版本&#xff0c;新增了就用 "" 显示新加一行&#xff0c;删除了就用 "-" 显示删除一行&#xff0c;修改了一行就用 "-"、"" 显示将旧版本中的该行干掉了并…
阅读更多...
Modown主题v8.12 安装教程和主题下载

Modown主题v8.12 安装教程和主题下载

亲测」Modown主题v8.12学习版 上传好主题选择该主题就好了设置 设置好的首页 内容页&#xff1a; WordPress主题Modown和WordPress插件Erphpdown想必正在使用WordPress程序建站的站长都非常熟悉&#xff0c;因为这两款应用在WordPress站长圈子里还是比较知名的&#xff0c;所以…
阅读更多...
计算机毕业设计 基于SpringBoot的无人智慧超市管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解+答疑

计算机毕业设计 基于SpringBoot的无人智慧超市管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解+答疑

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
GoLang Filepath.Walk遍历优化

GoLang Filepath.Walk遍历优化

原生标准库在文件量过大时效率和内存均表现不好 1400万文件遍历Filepath.Walk 1400万文件重写直接调用windows api并处理细节 结论 1400万文件遍历时对比 对比条目filepath.walkwindows api并触发黑科技运行时间710秒22秒内存占用480M38M 关键代码 //超级快的文件遍历 fun…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023