前端根据模版生成PPT

前端开源生成PPT的工具：
PptxGenJS
在线编辑通信问题：

1. 全双工
   web Sockets

一、前端生成PPT文件

中台提供的sdk并不支持创建ppt的api，只能前端自己实现创建ppt的功能
使用pptxgenjs插件根据配置生成导出ppt
示例代码：

import { ref } from 'vue'
import PptxGenJS from 'pptxgenjs'

const pptUrl = ref(null)

function createAndEditPPT() {
  // 创建一个新的演示文稿实例
  const pptx = new PptxGenJS()

  // 添加一个新的幻灯片
  const slide = pptx.addSlide()

  // 在幻灯片中添加文本框
  slide.addText('Hello, Vue with PptxGenJS!', {
    x: 1,
    y: 1,
    w: 9,
    h: 1,
    fontSize: 24,
    color: '363636',
  })

  // 添加图片
  slide.addImage({
    data: 'https://via.placeholder.com/900x500', // 这里可以替换为你的图片URL
    x: 1,
    y: 2,
    w: 9,
    h: 4,
  })
  // // 保存演示文稿为ppt文件
  // pptx.writeFile({ fileName: 'Browser-PowerPoint-Demo.pptx' }).then(fileName => {
  //   console.log(`created file: ${fileName}`)
  // })
  //保存演示文稿为Blob对象
  pptx
    .write({ outputType: 'blob', compression: false })
    .then(blob => {
      // 将Blob对象转换为URL
      //pptUrl.value = URL.createObjectURL(blob)
    })
    .catch(error => {
      console.error('保存演示文稿时出错:', error)
    })

创建ppt文件，并且上传ppt文件，生成在线文件，获取文件的在线编辑地址，在前端web页面中通过iframe标签展示在线地址

原文地址：https://blog.csdn.net/qq_36208612/article/details/143500880

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！