pptxtojson 0.0.1 → 0.0.2

package/index.html

@@ -11,7 +11,7 @@
 
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.2/dist/jsoneditor.min.css">
 	<script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.2/dist/jsoneditor.min.js"></script>
-	<script src="dist/index.js"></script>
+	<script src="dist/index.umd.js"></script>
 
 	<style>
 		* {
@@ -75,6 +75,7 @@
 			text-align: center;
 			cursor: pointer;
 			user-select: none;
+			margin-bottom: 20px;
 		}
 		.upload-input {
 			display: none;
@@ -88,6 +89,8 @@
 			点击上传 .pptx 文件
 			<input class="upload-input" type="file" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
 		</div>
+
+		<a href="https://github.com/pipipi-pikachu/pptx2json">Github</a>
 	</div>
 	<div id="jsoneditor"></div>
 	

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "pptxtojson",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "A javascript tool for parsing .pptx file",
 	"type": "module",
-	"main": "./dist/index.js",
-	"module": "./dist/index.esm.js",
+	"main": "./dist/index.umd.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
 	"scripts": {
 		"clean:dist": "rimraf dist",
 		"dev": "rollup -c -w",

package/rollup.config.js

@@ -17,13 +17,16 @@ export default {
   onwarn,
   output: [
     {
-      file: 'dist/index.js',
+      file: 'dist/index.umd.js',
       format: 'umd',
       name: 'pptxtojson',
+      sourcemap: true,
     },
     {
-      file: 'dist/index.esm.js',
+      file: 'dist/index.js',
       format: 'es',
+      name: 'pptxtojson',
+      sourcemap: true,
     },
   ],
   plugins: [

package/src/pptxtojson.js

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2'
 
 import { extractFileExtension, base64ArrayBuffer, eachElement, getTextByPathList, angleToDegrees } from './utils'
 
-const FACTOR = 96 / 914400
+const FACTOR = 75 / 914400
 
 let themeContent = null
 
@@ -321,6 +321,10 @@ function processSpNode(node, warpObj) {
     slideMasterSpNode = warpObj['slideMasterTables']['idxTable'][idx]
   }
 
+  if (!type) {
+    const txBoxVal = getTextByPathList(node, ['p:nvSpPr', 'p:cNvSpPr', 'attrs', 'txBox'])
+    if (txBoxVal === '1') type = 'text'
+  }
   if (!type) type = getTextByPathList(slideLayoutSpNode, ['p:nvSpPr', 'p:nvPr', 'p:ph', 'attrs', 'type'])
   if (!type) type = getTextByPathList(slideMasterSpNode, ['p:nvSpPr', 'p:nvPr', 'p:ph', 'attrs', 'type'])
 
@@ -376,7 +380,7 @@ function genShape(node, slideLayoutSpNode, slideMasterSpNode, id, name, idx, typ
     const fillColor = getShapeFill(node, true)
 
     return {
-      type: 'shape',
+      type: type === 'text' ? 'text' : 'shape',
       left,
       top,
       width,
@@ -494,59 +498,56 @@ function genTextBody(textBodyNode, slideLayoutSpNode, slideMasterSpNode, type, w
   let text = ''
   const slideMasterTextStyles = warpObj['slideMasterTextStyles']
 
-  if (textBodyNode['a:p'].constructor === Array) {
-    for (const pNode of textBodyNode['a:p']) {
-      const rNode = pNode['a:r']
-      text += `<div class="${getHorizontalAlign(pNode, slideLayoutSpNode, slideMasterSpNode, type, slideMasterTextStyles)}">`
-      text += genBuChar(pNode)
-      if (!rNode) text += genSpanElement(pNode, slideLayoutSpNode, type, warpObj)
-      else if (rNode.constructor === Array) {
-        for (const rNodeItem of rNode) text += genSpanElement(rNodeItem, slideLayoutSpNode, type, warpObj)
-      } 
-      else text += genSpanElement(rNode, slideLayoutSpNode, type, warpObj)
-      text += '</div>'
-    }
-  } 
-  else {
-    const pNode = textBodyNode['a:p']
+  const pNode = textBodyNode['a:p']
+  const pNodes = pNode.constructor === Array ? pNode : [pNode]
+
+  let isList = ''
+
+  for (const pNode of pNodes) {
     const rNode = pNode['a:r']
-    text += `<div class="${getHorizontalAlign(pNode, slideLayoutSpNode, slideMasterSpNode, type, slideMasterTextStyles)}">`
-    text += genBuChar(pNode)
+    const align = getHorizontalAlign(pNode, slideLayoutSpNode, slideMasterSpNode, type, slideMasterTextStyles)
+
+    const listType = getListType(pNode)
+    if (listType) {
+      if (!isList) {
+        text += `<${listType}>`
+        isList = listType
+      }
+      else if (isList && isList !== listType) {
+        text += `</${isList}>`
+        text += `<${listType}>`
+        isList = listType
+      }
+      text += `<li style="text-align: ${align};">`
+    }
+    else {
+      if (isList) {
+        text += `</${isList}>`
+        isList = ''
+      }
+      text += `<p style="text-align: ${align};">`
+    }
+    
     if (!rNode) text += genSpanElement(pNode, slideLayoutSpNode, type, warpObj)
     else if (rNode.constructor === Array) {
       for (const rNodeItem of rNode) text += genSpanElement(rNodeItem, slideLayoutSpNode, type, warpObj)
     } 
     else text += genSpanElement(rNode, slideLayoutSpNode, type, warpObj)
-    text += '</div>'
+
+    if (listType) text += '</li>'
+    else text += '</p>'
   }
   return text
 }
 
-function genBuChar(node) {
+function getListType(node) {
   const pPrNode = node['a:pPr']
+  if (!pPrNode) return ''
 
-  let lvl = parseInt(getTextByPathList(pPrNode, ['attrs', 'lvl']))
-  if (isNaN(lvl)) lvl = 0
-
-  const buChar = getTextByPathList(pPrNode, ['a:buChar', 'attrs', 'char'])
-  if (buChar) {
-    const buFontAttrs = getTextByPathList(pPrNode, ['a:buFont', 'attrs'])
-
-    let marginLeft = parseInt(getTextByPathList(pPrNode, ['attrs', 'marL'])) * FACTOR
-    if (buFontAttrs) {
-      let marginRight = parseInt(buFontAttrs['pitchFamily'])
-
-      if (isNaN(marginLeft)) marginLeft = 328600 * FACTOR
-      if (isNaN(marginRight)) marginRight = 0
-
-      const typeface = buFontAttrs['typeface']
-
-      return `<span style="font-family: ${typeface}; margin-left: ${marginLeft * lvl}px; margin-right: ${marginRight}px; font-size: 20pt;">${buChar}</span>`
-    } 
-    marginLeft = 328600 * FACTOR * lvl
-    return `<span style="margin-left: ${marginLeft}px;">${buChar}</span>`
-  }
-  return `<span style="margin-left: ${328600 * FACTOR * lvl}px; margin-right: 0;"></span>`
+  if (pPrNode['a:buChar']) return 'ul'
+  if (pPrNode['a:buAutoNum']) return 'ol'
+  
+  return ''
 }
 
 function genSpanElement(node, slideLayoutSpNode, type, warpObj) {
@@ -556,22 +557,26 @@ function genSpanElement(node, slideLayoutSpNode, type, warpObj) {
   if (typeof text !== 'string') text = getTextByPathList(node, ['a:fld', 'a:t'])
   if (typeof text !== 'string') text = '&nbsp;'
 
-  const styleText = `
-    color: ${getFontColor(node)};
-    font-size: ${getFontSize(node, slideLayoutSpNode, type, slideMasterTextStyles)};
-    font-family: ${getFontType(node, type)};
-    font-weight: ${getFontBold(node)};
-    font-style: ${getFontItalic(node)};
-    text-decoration: ${getFontDecoration(node)};
-    vertical-align: ${getTextVerticalAlign(node)};
-  `
+  let styleText = ''
+  const fontColor = getFontColor(node)
+  const fontSize = getFontSize(node, slideLayoutSpNode, type, slideMasterTextStyles)
+  const fontType = getFontType(node, type)
+  const fontBold = getFontBold(node)
+  const fontItalic = getFontItalic(node)
+  const fontDecoration = getFontDecoration(node)
+  if (fontColor) styleText += `color: ${fontColor};`
+  if (fontSize) styleText += `font-size: ${fontSize};`
+  if (fontType) styleText += `font-family: ${fontType};`
+  if (fontBold) styleText += `font-weight: ${fontBold};`
+  if (fontItalic) styleText += `font-style: ${fontItalic};`
+  if (fontDecoration) styleText += `text-decoration: ${fontDecoration};`
 
   const linkID = getTextByPathList(node, ['a:rPr', 'a:hlinkClick', 'attrs', 'r:id'])
   if (linkID) {
     const linkURL = warpObj['slideResObj'][linkID]['target']
-    return `<span class="text-block" style="${styleText}"><a href="${linkURL}" target="_blank">${text.replace(/\s/i, '&nbsp;')}</a></span>`
+    return `<span style="${styleText}"><a href="${linkURL}" target="_blank">${text.replace(/\s/i, '&nbsp;')}</a></span>`
   } 
-  return `<span class="text-block" style="${styleText}">${text.replace(/\s/i, '&nbsp;')}</span>`
+  return `<span style="${styleText}">${text.replace(/\s/i, '&nbsp;')}</span>`
 }
 
 function genTable(node, warpObj) {
@@ -764,10 +769,10 @@ function getHorizontalAlign(node, slideLayoutSpNode, slideMasterSpNode, type, sl
     }
   }
   if (!algn) {
-    if (type === 'title' || type === 'subTitle' || type === 'ctrTitle') return 'h-mid'
-    else if (type === 'sldNum') return 'h-right'
+    if (type === 'title' || type === 'subTitle' || type === 'ctrTitle') return 'center'
+    else if (type === 'sldNum') return 'right'
   }
-  return algn === 'ctr' ? 'h-mid' : algn === 'r' ? 'h-right' : 'h-left'
+  return algn === 'ctr' ? 'center' : algn === 'r' ? 'right' : 'left'
 }
 
 function getFontType(node, type) {
@@ -787,12 +792,12 @@ function getFontType(node, type) {
     }
   }
 
-  return typeface || 'inherit'
+  return typeface || ''
 }
 
 function getFontColor(node) {
   const color = getTextByPathList(node, ['a:rPr', 'a:solidFill', 'a:srgbClr', 'attrs', 'val'])
-  return color ? `#${color}` : '#000'
+  return color ? `#${color}` : ''
 }
 
 function getFontSize(node, slideLayoutSpNode, type, slideMasterTextStyles) {
@@ -825,24 +830,19 @@ function getFontSize(node, slideLayoutSpNode, type, slideMasterTextStyles) {
   const baseline = getTextByPathList(node, ['a:rPr', 'attrs', 'baseline'])
   if (baseline && !isNaN(fontSize)) fontSize -= 10
 
-  return (isNaN(fontSize) || !fontSize) ? 'inherit' : (fontSize + 'pt')
+  return (isNaN(fontSize) || !fontSize) ? '24px' : (fontSize / 0.75 + 'px')
 }
 
 function getFontBold(node) {
-  return (node['a:rPr'] && node['a:rPr']['attrs']['b'] === '1') ? 'bold' : 'initial'
+  return (node['a:rPr'] && node['a:rPr']['attrs']['b'] === '1') ? 'bold' : ''
 }
 
 function getFontItalic(node) {
-  return (node['a:rPr'] && node['a:rPr']['attrs']['i'] === '1') ? 'italic' : 'normal'
+  return (node['a:rPr'] && node['a:rPr']['attrs']['i'] === '1') ? 'italic' : ''
 }
 
 function getFontDecoration(node) {
-  return (node['a:rPr'] && node['a:rPr']['attrs']['u'] === 'sng') ? 'underline' : 'initial'
-}
-
-function getTextVerticalAlign(node) {
-  const baseline = getTextByPathList(node, ['a:rPr', 'attrs', 'baseline'])
-  return baseline ? (parseInt(baseline) / 1000) + '%' : 'baseline'
+  return (node['a:rPr'] && node['a:rPr']['attrs']['u'] === 'sng') ? 'underline' : ''
 }
 
 function getBorder(node, isSvgMode) {

package/src/utils.js

@@ -1,11 +1,11 @@
 export function base64ArrayBuffer(arrayBuffer) {
-  let base64 = ''
   const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
   const bytes = new Uint8Array(arrayBuffer)
   const byteLength = bytes.byteLength
   const byteRemainder = byteLength % 3
   const mainLength = byteLength - byteRemainder
-
+  
+  let base64 = ''
   let a, b, c, d
   let chunk