pptx-parser/example/index.js

pure javascript tool to parse pptx file to json in browser

import parse, { vf } from 'pptx-parser'
import { createVF } from '@vf.js/launcher'
// import openXml from '../open-xml-sdk/openxml'
// import '../src/google-slide-api'
import tinycolor2 from 'tinycolor2'
window.tiny = tinycolor2
let pl = null
const fileDlg = document.getElementById('fileDlg')

fileDlg.onchange = handleFile
let total = 0
let curr = 0

async function handleFile(e) {
  const file = e.target.files[0]
  if (!file) return
  try {
    const pptJson = await parse(file, { flattenGroup: true })
    console.log(pptJson)
    const width = pptJson.pageSize.width.value
    const height = pptJson.pageSize.height.value
    const vfJson = await vf(pptJson, { width, height })
    console.log('vf-json', vfJson)
    const tmp = new Blob([JSON.stringify(vfJson)], { type: 'application/json' })
    const config = {
      container: document.querySelector('.vf-container'),
      debug: true,
      width,
      height,
      resolution: window.devicePixelRatio
    }
    console.log(config)
    const v = createVF(config, player => {
      window.player = pl = player
      window.v = v
      player.onReady = function() {
        console.log("onReady"); //初始化完成
        curr = 0
        total = pl.data.scenes.length
      }
    
      player.onSceneCreate = function() {
        console.log("onSceneCreate"); //资源加载完成
      }
    
      player.onMessage = function(msg) {
        console.log("onMessage ==>", msg);
      }
    
      player.onError = function(evt) {
        console.log("onError ==>", evt);
      }
    
      player.onDispose = function() {
        console.log("onDispose");
      }
      player.play(URL.createObjectURL(tmp))
    })
    
  } catch(e) {
    console.log(e)
  }
}

document.querySelector('#btn-prev').onclick = function() {
  if (curr <= 0) return
  pl && pl.switchToSceneIndex(--curr)
}
document.querySelector('#btn-next').onclick = function() {
  if (curr >= total) return
  pl && pl.switchToSceneIndex(++curr)
}