PPTX Parser

这是一个可以将 .pptx 文件转为可读的 json 数据的 JavaScript 库。

🔨 安装

npm install ppt-parser

💿 用法

<input type="file" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>

import { parse } from 'ppt-parser';

const options = {
	slideFactor: 75 / 914400, // 幻灯片尺寸转换因子，默认 96 / 914400
	fontsizeFactor: 100 / 96, // 字号转换因子，默认 100 / 75
}

document.querySelector('input').addEventListener('change', evt => {
	const file = evt.target.files[0]

	const reader = new FileReader()
	reader.onload = async e => {
		const json = await parse(e.target.result, options)
		console.log(json)
	}
	reader.readAsArrayBuffer(file)
})

// 输出示例
{
	"slides": {
		"fill": {
			"type": "color",
			"value": "#FF0000"
		},
		"elements": [
			// element data list
		],
	},
	"size": {
		"width": 1280,
		"height": 720
	}
}

📏 输出值单位

为了方便在web应用中使用，在默认情况下，所有输出的长度值单位都是px（像素），但这个值不一定是正确的，你可能需要根据你的设备情况适当调整 slideFactor 和 fontsizeFactor 参数来获取更准确的结果。或者将这个两个参数全部设置为1，这样输出的将会是原始数据，你可以在此基础上将原数据根据具体情况进行转换。

📕 功能支持

幻灯片尺寸

| prop | type | 描述 |------------------------|--------------------------------|--------------- | width | number | 宽度 | height | number | 高度

页面背景

| prop | type | 描述 |------------------------|---------------------------------|--------------- | type | 'color' 丨 'image' 丨 'gradient' | 背景类型 | value | SlideColorFill 丨 SlideImageFill 丨 SlideGradientFill| 背景值

页内元素

文字

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'text' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | borderColor | string | 边框颜色 | borderWidth | number | 边框宽度 | borderType | 'solid' 丨 'dashed' 丨 'dotted' | 边框类型 | borderStrokeDasharray | string | 非实线边框样式 | shadow | Shadow | 阴影 | fillColor | string | 填充色 | content | string | 内容文字（HTML富文本） | isFlipV | boolean | 垂直翻转 | isFlipH | boolean | 水平翻转 | rotate | number | 旋转角度 | vAlign | string | 垂直对齐方向 | isVertical | boolean | 是否为竖向文本 | name | string | 元素名

图片

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'image' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | src | string | 图片地址（base64） | rotate | number | 旋转角度

形状

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'shape' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | borderColor | string | 边框颜色 | borderWidth | number | 边框宽度 | borderType | 'solid' 丨 'dashed' 丨 'dotted' | 边框类型 | borderStrokeDasharray | string | 非实线边框样式 | shadow | Shadow | 阴影 | fillColor | string | 填充色 | content | string | 内容文字（HTML富文本） | isFlipV | boolean | 垂直翻转 | isFlipH | boolean | 水平翻转 | rotate | number | 旋转角度 | shapType | string | 形状类型 | vAlign | string | 垂直对齐方向 | path | string | 路径（仅自定义形状存在） | name | string | 元素名

表格

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'table' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | data | TableCell[][] | 表格数据 | themeColor | string | 主题颜色

图表

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'chart' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | data | ChartItem[] 丨 ScatterChartData | 图表数据 | chartType | ChartType | 图表类型 | barDir | 'bar' 丨 'col' | 柱状图方向 | marker | boolean | 是否带数据标记 | holeSize | string | 环形图尺寸 | grouping | string | 分组模式 | style | string | 图表样式

视频

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'video' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | blob | string | 视频blob | src | string | 视频src

音频

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'audio' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | blob | string | 音频blob

Smart图

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'diagram' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | elements | (Shape 丨 Text)[] | 子元素集合

多元素组合

| prop | type | 描述 |------------------------|--------------------------------|--------------- | type | 'group' | 类型 | left | number | 水平坐标 | top | number | 垂直坐标 | width | number | 宽度 | height | number | 高度 | elements | Element[] | 子元素集合

🙏 感谢

本仓库主要参考了 PPTX2HTML 、PPTXjs 的实现