演示文稿在流转过程中会带上标题、主题、作者、公司、关键词等说明信息,这些字段就是文档属性。桌面软件里要逐份修改,批量核对时又很难快速看全。把文件传到服务端处理,则意味着内容离开了用户的设备。
本文介绍用 Spire.Presentation for JavaScript 实现添加、读取和移除 PowerPoint 的内置文档属性。它基于 WebAssembly 在浏览器端直接加载、修改与保存 pptx,通过虚拟文件系统(VFS)读写文件,全程不出本机,不需要后端。
本文介绍三个核心功能点:
有关安装和项目配置,请参考 React 项目中集成 Spire.Presentation for JavaScript。下面的示例假定 Spire.Presentation 已安装、WebAssembly 模块已初始化。
为 PowerPoint 文件添加文档属性
Spire.Presentation for JavaScript 通过 DocumentProperty 写入文档属性:直接给 Title、Subject、Author 等同名成员赋值即可。
具体操作步骤如下:
- 获取 Spire.Presentation 的 WASM 模块,确认已就绪。
- 读入示例演示文稿,创建
Presentation对象并加载该文件。 - 使用
DocumentProperty写入Title、Subject、Author等内置属性。 - 使用
Presentation.SaveToFile()方法保存结果文件。 - 从 VFS 读出结果文件并触发浏览器下载。
为 PowerPoint 文件添加文档属性的代码如下:
function App() {
const addDocumentProperties = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 载入示例演示文稿
await window.spire.FetchFileToVFS('示例演示文稿.pptx', "", `${process.env.PUBLIC_URL}/data/`);
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile('示例演示文稿.pptx');
const dp = ppt.DocumentProperty;
// 写入内置文档属性
dp.Title = '年度销售简报';
dp.Subject = '公司业绩和销售策略';
dp.Author = '张三';
dp.Manager = '李四';
dp.Company = '冰蓝科技公司';
dp.Category = '业务';
dp.Keywords = '销售,战略,业绩';
dp.Comments = '请在周五之前审核并提供反馈';
// 保存结果文件
const outputFileName = '已添加文档属性的演示文稿.pptx';
ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
ppt.Dispose();
// 从 VFS 读取生成的文件,触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>添加文档属性</h1>
<button onClick={addDocumentProperties}>
添加文档属性
</button>
</div>
);
}
export default App;
在 PowerPoint 的属性面板里可以看到写入的内置属性:

读取 PowerPoint 文件的文档属性
Spire.Presentation for JavaScript 通过 DocumentProperty 读取文档属性:直接读取 Title、Subject、Author 等同名成员。
具体操作步骤如下:
- 获取 Spire.Presentation 的 WASM 模块,确认已就绪。
- 读入第一节生成的演示文稿,创建
Presentation对象并加载该文件。 - 使用
DocumentProperty读取Title、Subject、Author等内置属性。 - 把读取结果写入 txt 文件。
- 从 VFS 读出结果文件并触发浏览器下载。
读取 PowerPoint 文件的文档属性的代码如下:
function App() {
const readDocumentProperties = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 读取第一节生成的演示文稿
const inputFileName = '已添加文档属性的演示文稿.pptx';
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile(inputFileName);
const dp = ppt.DocumentProperty;
// 读取内置文档属性
const lines = [
`标题: ${dp.Title}`,
`主题: ${dp.Subject}`,
`作者: ${dp.Author}`,
`经理: ${dp.Manager}`,
`公司: ${dp.Company}`,
`类别: ${dp.Category}`,
`关键字: ${dp.Keywords}`,
`评论: ${dp.Comments}`,
];
// 把读取到的信息写入 txt 文件
const outputFileName = '文档属性.txt';
window.dotnetRuntime.Module.FS.writeFile(outputFileName, lines.join('\n'));
ppt.Dispose();
// 从 VFS 读取生成的文件,触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>读取文档属性</h1>
<button onClick={readDocumentProperties}>
读取文档属性
</button>
</div>
);
}
export default App;
导出的 txt 文件按顺序列出各项内置属性:

从 PowerPoint 文件中移除文档属性
Spire.Presentation for JavaScript 通过 DocumentProperty 移除文档属性:把 Title、Subject、Author 等同名成员赋为空字符串即可清空。
具体操作步骤如下:
- 获取 Spire.Presentation 的 WASM 模块,确认已就绪。
- 读入第一节生成的演示文稿,创建
Presentation对象并加载该文件。 - 使用
DocumentProperty把Title、Subject、Author等内置属性赋为空字符串。 - 使用
Presentation.SaveToFile()方法保存结果文件。 - 从 VFS 读出结果文件并触发浏览器下载。
从 PowerPoint 文件中移除文档属性的代码如下:
function App() {
const removeDocumentProperties = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 读取第一节生成的演示文稿
const inputFileName = '已添加文档属性的演示文稿.pptx';
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile(inputFileName);
const dp = ppt.DocumentProperty;
// 清空内置文档属性
dp.Title = '';
dp.Subject = '';
dp.Author = '';
dp.Manager = '';
dp.Company = '';
dp.Category = '';
dp.Keywords = '';
dp.Comments = '';
// 保存结果文件
const outputFileName = '已移除文档属性的演示文稿.pptx';
ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
ppt.Dispose();
// 从 VFS 读取生成的文件,触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>移除文档属性</h1>
<button onClick={removeDocumentProperties}>
移除文档属性
</button>
</div>
);
}
export default App;
清空后,属性面板里的内置字段为空:

常见问题
内置文档属性保存在文件的哪里
原因:Title、Author 等内置属性由 Office 规范定义,存放在 pptx 包内 docProps 目录下的属性部件里,与幻灯片内容分开保存。
解决:直接用 DocumentProperty 的同名成员读写即可,无需操作底层 XML。
读取没有设置过的内置属性会返回什么
原因:内置字段始终存在,未填写时取到的是空字符串,而不是报错。
解决:读到的值为空串,就说明该项没有设置。
怎么清空某个内置属性
原因:内置字段的键名固定,不能像集合那样移除条目。
解决:把对应成员赋为空字符串即可:
ppt.DocumentProperty.Author = '';
内置属性支持中文吗
原因:内置属性以 Unicode 文本保存。
解决:直接赋中文字符串即可,读取时会原样返回。
内置属性和幻灯片里的文字有什么区别
原因:内置属性是文稿级的元数据,不会显示在页面上;幻灯片里的文字属于正文内容。
解决:需要展示给读者的说明写进幻灯片;用于检索、归档的文稿信息放在文档属性里。
获取免费许可证
如果您希望删除结果文档中的评估消息,或者摆脱功能限制,请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。







