在实际文档流转中，水印是标识文档状态（如"机密""草稿"）或保护版权的常用手段。无论是给内部文档打上"保密"字样，还是将公司 Logo 以水印形式嵌入合同，亦或是清理他人文档中的现有水印，都是高频操作。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接处理 Word 文档，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript 的方法。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。
添加文字水印
为文档添加文字水印是最常见的需求之一。例如，在内部文档上标注"机密"，或在审阅版本中标明"草稿"。Spire.Doc 通过 TextWatermark 对象，可设置水印文字、字号、颜色和布局方向（水平/对角线）。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文件载入 WASM 虚拟文件系统；然后实例化 Document 加载文件，创建 TextWatermark 对象并设置属性，将其赋值给文档的 Watermark 属性；最后保存文档并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。
function App() {
const AddTextWatermark = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将字体和 Word 文件载入 VFS
await window.spire.FetchFileToVFS('msyh.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'Template.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 创建文字水印对象
let txtWatermark = new wasmModule.TextWatermark();
txtWatermark.Text = "机密";
txtWatermark.FontSize = 95;
txtWatermark.Color = wasmModule.Color.get_Red();
txtWatermark.Layout = wasmModule.WatermarkLayout.Diagonal;
// 将水印应用到文档
doc.Watermark = txtWatermark;
// 定义输出文件名并保存
const outputFileName = "TextWatermark_output.docx";
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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>为 Word 文档添加文字水印</h1>
<button onClick={AddTextWatermark}>
Generate
</button>
</div>
);
}
export default App;
添加文字水印后，文档背景中会显示指定的文字内容。
添加图片水印
除了文字水印，许多企业也偏好使用图片水印——将公司 Logo 或品牌图形以半透明方式铺满文档背景，既提升文档专业度，又防止内容被随意复制传播。Spire.Doc 通过 PictureWatermark 对象实现图片水印的添加，支持设置缩放比例和冲刷效果（IsWashout）。相比文字水印，图片水印需要额外将图片文件载入 VFS。
function App() {
const AddImageWatermark = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
//图片和 Word 文件载入 VFS
const inputFileName = 'Template.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
const imageFileName = 'Logo.png';
await window.spire.FetchFileToVFS(imageFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 创建图片水印对象
let picture = new wasmModule.PictureWatermark();
picture.SetPicture(imageFileName);
picture.Scaling = 250;
picture.IsWashout = false;
// 将水印应用到文档
doc.Watermark = picture;
// 定义输出文件名并保存
const outputFileName = "ImageWatermark_output.docx";
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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>为 Word 文档添加图片水印</h1>
<button onClick={AddImageWatermark}>
Generate
</button>
</div>
);
}
export default App;
添加图片水印后，文档背景会显示指定的图片内容。
移除水印
接手他人文档时，常需先清除原有水印再应用企业模板。无论是文字水印还是图片水印，Spire.Doc 均通过将文档的 Watermark 属性设为 null 一键移除，无需区分水印类型。核心流程：载入文档 → 将 Watermark 置空 → 保存输出。
function App() {
const RemoveWatermark = async () => {
// 获取 Spire.Doc WASM 模块
const wasmModule = window.wasmModule?.spiredoc;
// 检查模块是否就绪
if (!wasmModule) {
alert('Spire.Doc is not ready yet');
return;
}
// 将Word 文件载入 VFS
const inputFileName = 'Watermarked.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new wasmModule.Document();
doc.LoadFromFile(inputFileName);
// 将水印设为 null，移除文字或图片水印
doc.Watermark = null;
// 定义输出文件名并保存
const outputFileName = "RemoveWatermark_output.docx";
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 释放资源
doc.Close();
doc.Dispose();
// 从 VFS 读取生成的文件，触发下载
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
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>移除 Word 文档中的水印</h1>
<button onClick={RemoveWatermark}>
Generate
</button>
</div>
);
}
export default App;
水印移除后，文档恢复为无干扰的纯内容状态。
常见问题
添加文字水印后文档中未显示
原因：水印对象已创建但未赋值给 document.Watermark 属性，或水印颜色与文档背景色相同导致不可见。
解决：确保创建后执行赋值操作，并选择与背景有对比的颜色：
document.Watermark = txtWatermark;
图片水印显示为全黑或全白
原因：图片文件未正确载入 VFS，或 SetPicture 传入的文件名与 VFS 中的路径不一致。
解决：确认图片已通过 FetchFileToVFS 载入，且文件名完全匹配：
await window.spire.FetchFileToVFS('Logo.png', '', `${process.env.PUBLIC_URL}/data/`);
picture.SetPicture('Logo.png');
移除水印后文档变空白
原因：错误地创建了空文档而非加载原始文档，导致水印移除后保存的是空文档。
解决：确认使用 LoadFromFile 加载了正确的输入文档：
document.LoadFromFile(inputFileName);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
