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

news2024/11/16 3:16:49

前言

公司新需求需要导出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. 创建PPT
      const 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 cell
      rows.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` value
      const 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.coloradmin.cn/o/1249290.html

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

相关文章

java学习part10 this

java学习part10 this

90-面向对象(进阶)-关键字this调用属性、方法、构造器_哔哩哔哩_bilibili 1.java的this java的this性质类似cpp的this&#xff0c; 但它是一种引用&#xff0c;所以用 this. xxx来调用。 this代表当前的类的实例&#xff0c;所以必须和某个对象结合起来使用&#xff0c;不能…
阅读更多...
rk3588配置uac功能，android13使能uac及adb的复合设备

rk3588配置uac功能，android13使能uac及adb的复合设备

最近&#xff0c;因新增需求需要在现有产品上增加UAC的功能&#xff0c;查阅并学习相关知识后&#xff0c;在rk3588 SOC硬件平台搭载android13系统平台上成功配置了uac及uac&adb的复合设备。基于开源共享精神希望给大家提供些参考。 1.技术可行性预研 &#xff08;1&#…
阅读更多...
nodejs+vue＋python＋PHP+微信小程序-留学信息查询系统的设计与实现-安卓-计算机毕业设计

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

1、用户模块&#xff1a; 1&#xff09;登录&#xff1a;用户注册登录账号。 2&#xff09;留学查询模块&#xff1a;查询学校的入学申请条件、申请日期、政策变动等。 3&#xff09;院校排名&#xff1a;查询国外各院校的实力排名。 4&#xff09;测试功能&#xff1a;通过入学…
阅读更多...
LabVIEW中将SMU信号连接到PXI背板触发线

LabVIEW中将SMU信号连接到PXI背板触发线

LabVIEW中将SMU信号连接到PXI背板触发线 本文介绍如何将信号从PXI&#xff08;e&#xff09;SMU卡路由到PXI&#xff08;e&#xff09;机箱上的背板触发线。该过程涉及使用NI-DCPowerVI将SMU信号导出到PXI_TRIG线上。 在继续操作之前&#xff0c;请确保在开发PC上安装了兼容版…
阅读更多...
防止应用程序截屏（容器式，防止极域电子教室和录屏软件录制）

防止应用程序截屏（容器式，防止极域电子教室和录屏软件录制）

核心原理、实现目的 1、使用Panel容器将外部窗口嵌入自己写的程序 2、使用防止截屏的函数来对窗口透明&#xff0c;这可以使本窗口内所有窗口在录屏软件上消失 3、解放&#xff0c;抓取&#xff0c;存储句柄&#xff0c;实现摆脱录屏&#xff08;极域监控&#xff09; 程序…
阅读更多...
Ps：画笔工具的基本操作

Ps：画笔工具的基本操作

画笔工具 Brush Tool是 Ps 中最常用的工具&#xff0c;广泛地用于绘画与修饰工作。 虽然多数操作可在画笔工具的工具选项栏中选择执行&#xff0c;但是如果能记住相应的快捷键可大大提高工作效率。 熟练掌握画笔工具的操作对于使用其他工具也非常有益&#xff0c;因为 Ps 中许多…
阅读更多...
动态规划 之 钢条切割

动态规划 之 钢条切割

自顶向下递归实现(Recursive top-down implementation) 程序CUT-ROD对等式(14.2)进行了实现&#xff0c;伪代码如下&#xff1a; CUT-ROD(p, n)if n 0return 0q -∞for i 1 to nq max{q, p[i] CUT-ROD(p, n - i)}return q上面解决中重复对一个子结构问题重复求解了&#…
阅读更多...
手把手教你安装 Visual Studio 2022 及其简单使用

手把手教你安装 Visual Studio 2022 及其简单使用

软件下载 打开 Visual Studio 官网&#xff0c;个人选择免费的Community社区版就够用了。 软件安装 双击运行安装程序&#xff1a; 点击继续 即可&#xff1a; 等待加载完成&#xff1a; 可以看到 Visual Studio 2022 对应不同的开发需求提供了若干工作负载&#xff0c;这里以…
阅读更多...
CSS-长度单位篇

CSS-长度单位篇

px&#xff1a;像素em&#xff1a;相对元素font-size的倍数rem&#xff1a;相对根字体大小&#xff0c;html标签就是根%&#xff1a;相对父元素计算 注意&#xff1a;CSS中设置长度&#xff0c;必须加单位&#xff0c;否则样式无效&#xff01;
阅读更多...
HTML网站稳定性状态监控平台源码

HTML网站稳定性状态监控平台源码

这是一款网站稳定性状态监控平台源码&#xff0c;它基于UptimeRobot接口进行开发。当您的网站遇到故障时&#xff0c;该平台能够通过邮件或短信通知您。下面是对安装过程的详细说明&#xff1a; 安装步骤 将源码上传至您的主机或服务器&#xff0c;并进行解压操作。 在Uptim…
阅读更多...
DELL MD3600F存储重置管理软件密码

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

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

思科模拟器操作命令

模式 思科模拟器常见的模式有 用户模式 能够操作的命令比较少 特权模式特权模式下面可以操作的比较多 全局模式 接口模式 用户模式进入特权模式: 命令enable 特权模式进行全局模式命令: configure terminal 退出命令 exit命令&#xff1a;返回上一层&#xff0c;即一步一步…
阅读更多...
javascript判断是否是json格式

javascript判断是否是json格式

文章目录 一、问题二、解决三、总结3.1、定义 一、问题 工作中有用到JSON.parse这个来解析JSON字符串&#xff0c;这个时候突然有一次遇到JSON字符串是长串数字或数字字符串&#xff0c;主要是自己也没兼容好&#xff0c;就导致了一长串数字JSON.parse之后变成了e24等数字。主…
阅读更多...
无需API开发，有赞小程序集成广告推广系统，提升品牌曝光

无需API开发，有赞小程序集成广告推广系统，提升品牌曝光

无需API开发&#xff0c;实现有赞小程序与其他系统的连接 有赞小程序作为一个多功能的电子商务解决方案&#xff0c;为商家提供了无需复杂API开发就可以实现系统连接和集成的便捷途径。通过有赞小程序&#xff0c;商家可以轻松实现与各种系统的数据同步和应用互联&#xff0c;…
阅读更多...
Zynq-Linux移植学习笔记之67- 国产ZYNQ上通过GPIO模拟MDC/MDIO协议

Zynq-Linux移植学习笔记之67- 国产ZYNQ上通过GPIO模拟MDC/MDIO协议

1、背景介绍 模块上有9个PHY&#xff0c;其中两个PHY通过ZYNQ PS端的MDIO总线连接&#xff0c;其余7个PHY单独通过GPIO进行控制&#xff0c;需要实现GPIO模拟MDC/MDIO协议。 2、vivado工程设计 vivado工程内为每个PHY建立两个GPIO IP核&#xff0c;分别用来代表MDC和MDIO&…
阅读更多...
Vue 2.0源码分析-Virtual DOM

Vue 2.0源码分析-Virtual DOM

Virtual DOM 这个概念相信大部分人都不会陌生&#xff0c;它产生的前提是浏览器中的 DOM 是很“昂贵"的&#xff0c;为了更直观的感受&#xff0c;我们可以简单的把一个简单的 div 元素的属性都打印出来&#xff0c;如图所示&#xff1a; 可以看到&#xff0c;真正的 DOM …
阅读更多...
IDEA中的Postman？完全免费！

IDEA中的Postman？完全免费！

Postman是大家最常用的API调试工具&#xff0c;那么有没有一种方法可以不用手动写入接口到Postman&#xff0c;即可进行接口调试操作&#xff1f;今天给大家推荐一款IDEA插件&#xff1a;Apipost Helper&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还…
阅读更多...
用Python写一个浏览器集群框架

用Python写一个浏览器集群框架

更多Python学习内容&#xff1a;ipengtao.com 在分布式爬虫和大规模数据采集的场景中&#xff0c;使用浏览器集群是一种有效的方式&#xff0c;可以提高数据采集的速度和效率。本文将介绍如何用Python编写一个简单但强大的浏览器集群框架&#xff0c;以应对需要使用多个浏览器实…
阅读更多...
个人财务管理软件CheckBook Pro mac中文版特点介绍

个人财务管理软件CheckBook Pro mac中文版特点介绍

CheckBook Pro mac是一款Mac平台的个人财务管理软件&#xff0c;主要用于跟踪个人收入、支出和账户余额等信息。 CheckBook Pro mac 软件特点 简单易用&#xff1a;该软件的用户界面非常简洁明了&#xff0c;即使您是初学者也可以轻松上手。 多账户管理&#xff1a;该软件支持…
阅读更多...
一文彻底看懂Python切片，Python切片理解与操作

一文彻底看懂Python切片，Python切片理解与操作

1.什么是切片 切片是Python中一种用于操作序列类型（如列表、字符串和元组）的方法。它通过指定起始索引和结束索引来截取出序列的一部分，形成一个新的序列。切片是访问特定范围内的元素，就是一个Area。 说个笑话：切片不是切片，而是切片，但是又是切片。大家理解下呢（末…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023