pptxtojson 1.5.1 → 1.6.0

package/index.html

@@ -5,52 +5,248 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta name="description" content="Office PowerPoint(.pptx) file to JSON | 将 PPTX 文件转为可读的 JSON 数据" />
-	<meta name="keywords" content="pptx2json,pptxtojson,ppt,powerpoint,json,javascript,PPT解析,PPT转JSON" />
+	<meta name="keywords" content="pptx2json,pptxtojson,ppt,powerpoint,json,PPT解析,PPT转JSON" />
 	<link rel="icon" href="favicon.ico">
 	<title>pptxtojson - PPTX转JSON</title>	
 
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.2/dist/jsoneditor.min.css">
+	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
 	<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.2/dist/jsoneditor.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 	<script src="dist/index.umd.js"></script>
 
-	<style>
-		* {
-			margin: 0;
-			padding: 0;
-  		box-sizing: border-box;
-		}
-		html, body {
-			height: 100%;
-		}
-		::-webkit-scrollbar {
-			width: 5px;
-			height: 5px;
-			background-color: #fff;
-		}
-		::-webkit-scrollbar-thumb {
-			background-color: #c1c1c1;
-		}
+  <style>
+    :root {
+      --primary-color: #33bcfc;
+      --secondary-color: #d897fd;
+    }
 
-		body {
-			display: flex;
-		}
-		.main {
-			width: 40%;
-			min-width: 600px;
-			height: 100%;
-			margin-right: 10px;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-		}
-		#jsoneditor {
-			flex: 1;
-			height: 100%;
-			padding: 10px;
-		}
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Segoe UI', 'Roboto', sans-serif;
+    }
+
+    body {
+      color: #1e293b;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      background-color: #f3f4f6;
+    }
+
+    .container {
+      display: flex;
+      flex: 1;
+      padding: 32px;
+      padding-bottom: 0;
+    }
+
+    .left-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header {
+      margin-bottom: 16px;
+    }
+
+    .logo {
+      font-size: 32px;
+      font-weight: 700;
+      color: #1e293b;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+    }
+
+    .logo span {
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .tagline {
+      font-size: 14px;
+      color: #64748b;
+    }
+
+    .upload-section {
+      background-color: #fff;
+      border-radius: 12px;
+      padding: 32px;
+      margin-bottom: 32px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+      border: 1px dashed #d1d5db;
+      text-align: center;
+      transition: all 0.3s ease;
+    }
+
+    .upload-section.highlight {
+      border-color: var(--primary-color);
+      background-color: #f0f8ff;
+    }
+
+    .upload-section:hover {
+      border-color: var(--primary-color);
+    }
+
+    .upload-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .upload-title {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+
+    .upload-desc {
+      font-size: 13px;
+      color: #64748b;
+      margin-bottom: 24px;
+    }
+
+    .upload-btn {
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      color: #fff;
+      border: none;
+      padding: 12px 32px;
+      border-radius: 50px;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 15px rgba(58, 134, 255, 0.2);
+    }
+
+    .upload-btn:hover {
+      box-shadow: 0 6px 20px rgba(58, 134, 255, 0.3);
+    }
+
+    .features {
+      background-color: #fff;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+    }
+
+    .features + .features {
+      margin-top: 32px;
+    }
+
+    .features-title {
+      font-size: 20px;
+      font-weight: 700;
+      margin-bottom: 20px;
+      position: relative;
+      padding-bottom: 8px;
+    }
+
+    .features-title::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 40px;
+      height: 3px;
+      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+      border-radius: 3px;
+    }
+
+    .feature-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .feature-item.link {
+      cursor: pointer;
+    }
+
+    .feature-item.link:hover .feature-text {
+      color: var(--primary-color);
+    }
+
+    .feature-item + .feature-item {
+      margin-top: 16px;
+    }
+
+    .feature-icon {
+      min-width: 24px;
+      color: var(--primary-color);
+      margin-right: 12px;
+      font-size: 20px;
+    }
+
+    .feature-text {
+      font-size: 15px;
+      color: #334155;
+      transition: all 0.3s ease;
+    }
+
+    a {
+      color: unset;
+      text-decoration: none;
+    }
+
+    .footer {
+      font-size: 14px;
+      color: #64748b;
+      text-align: center;
+      padding: 24px;
+    }
+
+    .right-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      margin-left: 32px;
+    }
+
+    .result-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .result-title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .result-actions button {
+      background-color: transparent;
+      border: 1px solid #e2e8f0;
+      padding: 4px 16px;
+      border-radius: 4px;
+      margin-left: 8px;
+      color: #475569;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .result-actions button:hover {
+      background-color: #f8fafc;
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+    }
+
+    .json-preview {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 12px;
+      padding: 24px;
+      overflow: auto;
+      font-family: 'Courier New', monospace;
+      position: relative;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+    }
 		.jsoneditor-mode-view {
-			border: 2px solid #ddd;
+			border: none;
 		}
 		.jsoneditor-menu {
 			display: none;
@@ -63,70 +259,218 @@
 			padding-top: 0 !important;
 		}
 
-		.input-wrap {
-			width: 300px;
-			height: 80px;
-			background-color: #d14424;
-			color: #fff;
-			border-radius: 2px;
-			line-height: 80px;
-			font-size: 18px;
-			font-weight: 700;
-			text-align: center;
-			cursor: pointer;
-			user-select: none;
-			margin-bottom: 20px;
-		}
-		.upload-input {
-			display: none;
-		}
-		.link {
-			display: flex;
-		}
-		.link a {
-			padding: 5px 10px;
-			color: #d14424;
-		}
-	</style>
+    /* 响应式调整 */
+    @media screen and (max-width: 768px) {
+      .container {
+        flex-direction: column;
+      }
+
+      .left-panel,
+      .right-panel {
+        width: 100%;
+        flex: none;
+      }
+
+      .right-panel {
+        min-height: 50vh;
+        margin-left: 0;
+        margin-top: 32px;
+      }
+    }
+  </style>
 </head>
 
 <body>
-	<div class="main">
-		<div class="input-wrap">
-			点击上传 .pptx 文件
-			<input class="upload-input" type="file" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
-		</div>
-
-		<div class="link">
-			<a target="_blank" href="https://github.com/pipipi-pikachu/pptx2json">Github 仓库</a>
-			<a target="_blank" href="https://pipipi-pikachu.github.io/PPTist/">在 PPTist 中测试</a>
-		</div>
-	</div>
-	<div id="jsoneditor"></div>
+  <div class="container">
+    <!-- 左侧面板 -->
+    <div class="left-panel">
+      <div class="header">
+        <div class="logo">PPTX<span>TO</span>JSON</div>
+        <p class="tagline">将 PPTX 文件转为可读的 JSON 数据</p>
+      </div>
+
+      <div class="upload-section">
+        <div class="upload-icon">📤</div>
+        <h3 class="upload-title">上传PPTX文件</h3>
+        <p class="upload-desc">「点击选择文件」或「将文件拖放到区域内」上传</p>
+        <button class="upload-btn">选择文件</button>
+      </div>
+
+      <div class="features">
+        <h3 class="features-title">功能介绍</h3>
+        <div class="feature-item">
+          <span class="feature-icon">✓</span>
+          <p class="feature-text">解析PPTX数据，包括幻灯片主题、尺寸、背景、备注、母版、切页动画、页内元素及布局信息等</p>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">✓</span>
+          <p class="feature-text">支持页内元素包括：文字（HTML富文本）、图片、形状、线条、表格、图表、音视频、公式等复杂元素</p>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">✓</span>
+          <p class="feature-text">易读易写的结构化 JSON 数据格式</p>
+        </div>
+        <div class="feature-item">
+          <span class="feature-icon">✓</span>
+          <p class="feature-text">不依赖任何服务器端环境，直接在浏览器端运行</p>
+        </div>
+      </div>
+
+      <div class="features">
+        <h3 class="features-title">相关链接</h3>
+        <div class="feature-item link">
+          <span class="feature-icon">📦</span>
+          <p class="feature-text"><a href="https://github.com/pipipi-pikachu/pptx2json" target="_blank">GitHub 仓库</a></p>
+        </div>
+        <div class="feature-item link">
+          <span class="feature-icon">🧩</span>
+          <p class="feature-text"><a href="https://pipipi-pikachu.github.io/PPTist/" target="_blank">在 PPTist 中测试</a></p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧面板 -->
+    <div class="right-panel">
+      <div class="result-header">
+        <h2 class="result-title">解析结果</h2>
+        <div class="result-actions">
+          <button class="copy-btn">复制</button>
+          <button class="download-btn">下载</button>
+        </div>
+      </div>
+
+      <div class="json-preview">
+        
+      </div>
+    </div>
+  </div>
+  
+  <div class="footer">
+    <p>MIT License | Copyright © 2020-PRESENT <a href="https://github.com/pipipi-pikachu" target="_blank">pipipi-pikachu</a></p>
+  </div>
 	
 	<script>
-		const container = document.querySelector('#jsoneditor')
-		const inputWrapRef = document.querySelector('.input-wrap')
-		const inputRef = document.querySelector('.upload-input')
+    document.ondragleave = e => e.preventDefault()
+    document.ondrop = e => e.preventDefault()
+    document.ondragenter = e => e.preventDefault()
+    document.ondragover = e => e.preventDefault()
 
-		const editor = new JSONEditor(container, { mode: 'view' }, {})
+		const jsonPreviewRef = document.querySelector('.json-preview')
+    const uploadBtnRef = document.querySelector('.upload-btn')
+    const uploadSectionRef = document.querySelector('.upload-section')
+    const copyBtnRef = document.querySelector('.copy-btn')
+    const downloadBtnRef = document.querySelector('.download-btn')
 
-		inputRef.addEventListener('change', evt => {
-			const fileName = evt.target.files[0]
-			
-			const reader = new FileReader()
-			reader.onload = async e => {
-				const json = await pptxtojson.parse(e.target.result)
-				editor.set(json)
-				console.log(json)
+		let jsonString = ''
+
+		const editor = new JSONEditor(jsonPreviewRef, { mode: 'view' }, {})
+
+    uploadBtnRef.addEventListener('click', () => {
+      const input = document.createElement('input')
+      input.type = 'file'
+      input.accept = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+      input.click()
+
+      input.onchange = e => {
+        const files = e.target.files
+        if (files && files[0]) {
+          const reader = new FileReader()
+          reader.onload = async e => {
+            const json = await pptxtojson.parse(e.target.result)
+            editor.set(json)
+            console.log(json)
+            jsonString = JSON.stringify(json, null, 2)
+          }
+          reader.readAsArrayBuffer(files[0])
+        }
+      }
+    })
+
+    uploadSectionRef.addEventListener('drop', async e => {
+      uploadSectionRef.classList.remove('highlight')
+
+      const file = e.dataTransfer.files[0]
+
+      if (!file) return
+      if (file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation') {
+        const json = await pptxtojson.parse(file)
+        editor.set(json)
+        console.log(json)
+				jsonString = JSON.stringify(json, null, 2)
+      }
+    })
+
+    uploadSectionRef.addEventListener('dragenter', e => {
+      e.preventDefault()
+      uploadSectionRef.classList.add('highlight')
+    })
+
+    uploadSectionRef.addEventListener('dragleave', e => {
+      e.preventDefault()
+      if (!uploadSectionRef.contains(e.relatedTarget)) {
+        uploadSectionRef.classList.remove('highlight')
+      }
+    })
+
+    copyBtnRef.addEventListener('click', () => {
+      if (!jsonString) {
+				Toastify({
+					text: '请先上传文件',
+					duration: 1000,
+					gravity: 'top',
+					position: 'center',
+					style: {
+						background: 'linear-gradient(to right, #33bcfc, #d897fd)',
+						padding: '10px 20px',
+						fontSize: '14px',
+					},
+				}).showToast()
+				return
+			}
+
+      navigator.clipboard.writeText(jsonString)
+			Toastify({
+				text: '已复制到剪贴板',
+				duration: 1000,
+				gravity: 'top',
+				position: 'center',
+				style: {
+					background: 'linear-gradient(to right, #33bcfc, #d897fd)',
+					padding: '10px 20px',
+					fontSize: '14px',
+				},
+			}).showToast()
+    })
+
+    downloadBtnRef.addEventListener('click', () => {
+      if (!jsonString) {
+				Toastify({
+					text: '请先上传文件',
+					duration: 1000,
+					gravity: 'top',
+					position: 'center',
+					style: {
+						background: 'linear-gradient(to right, #33bcfc, #d897fd)',
+						padding: '10px 20px',
+						fontSize: '14px',
+					},
+				}).showToast()
+				return
 			}
-			reader.readAsArrayBuffer(fileName)
-		})
 
-		inputWrapRef.addEventListener('click', () => {
-			inputRef.value = ''
-			inputRef.click()
-		})
+      const blob = new Blob([jsonString], { type: 'application/json' })
+			const url = URL.createObjectURL(blob)
+			
+			const a = document.createElement('a')
+			a.href = url
+			a.download = 'slides.json'
+			
+			document.body.appendChild(a)
+			a.click()
+			
+			document.body.removeChild(a)
+			URL.revokeObjectURL(url)
+    })
 	</script>
 </body>
-</html>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pptxtojson",
-	"version": "1.5.1",
+	"version": "1.6.0",
 	"description": "A javascript tool for parsing .pptx file",
 	"type": "module",
 	"main": "./dist/index.umd.js",

package/src/animation.js

@@ -0,0 +1,81 @@
+import { getTextByPathList } from './utils'
+
+export function findTransitionNode(content, rootElement) {
+  if (!content || !rootElement) return null
+
+  const path1 = [rootElement, 'p:transition']
+  let transitionNode = getTextByPathList(content, path1)
+  if (transitionNode) return transitionNode
+
+  const path2 = [rootElement, 'mc:AlternateContent', 'mc:Choice', 'p:transition']
+  transitionNode = getTextByPathList(content, path2)
+  if (transitionNode) return transitionNode
+
+  const path3 = [rootElement, 'mc:AlternateContent', 'mc:Fallback', 'p:transition']
+  transitionNode = getTextByPathList(content, path3)
+  
+  return transitionNode
+}
+
+export function parseTransition(transitionNode) {
+  if (!transitionNode) return null
+
+  const transition = {
+    type: 'none',
+    duration: 1000,
+    direction: null,
+  }
+
+  const attrs = transitionNode.attrs || {}
+
+  let durationFound = false
+  const durRegex = /^p\d{2}:dur$/ 
+  for (const key in attrs) {
+    if (durRegex.test(key) && !isNaN(parseInt(attrs[key], 10))) {
+      transition.duration = parseInt(attrs[key], 10)
+      durationFound = true
+      break
+    }
+  }
+
+  if (!durationFound && attrs.spd) {
+    switch (attrs.spd) {
+      case 'slow':
+        transition.duration = 1000
+        break
+      case 'med':
+        transition.duration = 800
+        break
+      case 'fast':
+        transition.duration = 500
+        break
+      default:
+        transition.duration = 1000
+        break
+    }
+  }
+
+  if (attrs.advClick === '0' && attrs.advTm) {
+    transition.autoNextAfter = parseInt(attrs.advTm, 10)
+  }
+
+  const effectRegex = /^(p|p\d{2}):/ 
+  for (const key in transitionNode) {
+    if (key !== 'attrs' && effectRegex.test(key)) {
+      const effectNode = transitionNode[key]
+      transition.type = key.substring(key.indexOf(':') + 1)
+
+      if (effectNode && effectNode.attrs) {
+        const effectAttrs = effectNode.attrs
+        
+        if (effectAttrs.dur && !isNaN(parseInt(effectAttrs.dur, 10))) {
+          if (!durationFound) transition.duration = parseInt(effectAttrs.dur, 10)
+        }
+        if (effectAttrs.dir) transition.direction = effectAttrs.dir
+      }
+      break
+    }
+  }
+
+  return transition
+}

package/src/pptxtojson.js

@@ -13,6 +13,7 @@ import { getTableBorders, getTableCellParams, getTableRowParams } from './table'
 import { RATIO_EMUs_Points } from './constants'
 import { findOMath, latexFormart, parseOMath } from './math'
 import { getShapePath } from './shapePath'
+import { parseTransition, findTransitionNode } from './animation'
 
 export async function parse(file) {
   const slides = []
@@ -274,11 +275,18 @@ async function processSingleSlide(zip, sldFileName, themeContent, defaultTextSty
     }
   }
 
+  let transitionNode = findTransitionNode(slideContent, 'p:sld')
+  if (!transitionNode) transitionNode = findTransitionNode(slideLayoutContent, 'p:sldLayout')
+  if (!transitionNode) transitionNode = findTransitionNode(slideMasterContent, 'p:sldMaster')
+
+  const transition = parseTransition(transitionNode)
+
   return {
     fill,
     elements,
     layoutElements,
     note,
+    transition,
   }
 }
 

package/src/shape.js

@@ -50,7 +50,6 @@ export function getCustomShapePath(custShapType, w, h) {
   const arcToNodes = pathNodes['a:arcTo']
   let closeNode = getTextByPathList(pathNodes, ['a:close'])
   if (!Array.isArray(moveToNode)) moveToNode = [moveToNode]
-  if (!Array.isArray(lnToNodes)) lnToNodes = [lnToNodes]
 
   const multiSapeAry = []
   if (moveToNode.length > 0) {
@@ -72,6 +71,7 @@ export function getCustomShapePath(custShapType, w, h) {
       }
     })
     if (lnToNodes) {
+      if (!Array.isArray(lnToNodes)) lnToNodes = [lnToNodes]
       Object.keys(lnToNodes).forEach(key => {
         const lnToPtNode = lnToNodes[key]['a:pt']
         if (lnToPtNode) {