彩色文档打印时费墨，归档时那份颜色又用不上；PDF 的对象则按写入顺序排布，阅读器要等整份文件下载完才能渲染第一页，几十兆的手册点开先是空屏。这两件事过去都得靠桌面软件，一次处理一份，也进不了 Web 流程。

本文用 Spire.PDF for JavaScript 实现将 PDF 转换为灰度文档与线性化 PDF。灰度化改的是页面上的颜色，线性化改的只是文件内部的对象排列，两者互不影响。它基于 WebAssembly 在浏览器端直接加载、修改与保存 PDF 文档，全过程在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。

本文介绍两个核心功能点：

• 将 PDF 转换为灰度
• 将 PDF 线性化

有关安装和项目配置，请参考 React 项目中集成 Spire.PDF for JavaScript。以下示例默认已安装 Spire.PDF 并完成 WebAssembly 模块初始化。

将 PDF 转换为灰度

打印或归档前先做一次灰度化，可以省下彩墨。构造 PdfGrayConverter 时传入输入文件，调用 ToGrayPdf 写出灰度文档——页面上的彩色图像会被重新编码为灰阶，文字仍是可检索的文本。

function App() {
  const convertToGrayscale = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 将待转换的 PDF 文件载入 VFS
    const inputFileName = '业务数据概览.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 定义输出文件名
    const outputFileName = '灰度文档.pdf';

    // 以输入文件构造灰度转换器，再写出灰度文档
    const converter = new pdfModule.PdfGrayConverter({ filePath: inputFileName });
    converter.ToGrayPdf({ filePath: outputFileName });
    converter.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>将 PDF 转换为灰度</h1>
      <button onClick={convertToGrayscale}>
        开始转换
      </button>
    </div>
  );
}

export default App;

灰度后的示例文档，彩色图表已变为灰阶:

将 PDF 线性化

线性化是为快速 Web 查看（Fast Web View）准备的：阅读器不必等整份文件传完，就能先渲染出第一页。它的用法和第 1 点一样——构造 PdfToLinearizedPdfConverter 时传入输入文件，调用 ToLinearizedPdf 写出结果，文档的外观与内容原样保留。

function App() {
  const convertToLinearized = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 将待转换的 PDF 文件载入 VFS
    const inputFileName = '业务数据概览.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 定义输出文件名
    const outputFileName = '线性化文档.pdf';

    // 以输入文件构造线性化转换器，再写出线性化文档
    const converter = new pdfModule.PdfToLinearizedPdfConverter({ filePath: inputFileName });
    converter.ToLinearizedPdf({ filePath: outputFileName });
    converter.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>将 PDF 线性化</h1>
      <button onClick={convertToLinearized}>
        开始转换
      </button>
    </div>
  );
}

export default App;

线性化后的文档页面上看不出变化，改动在文件结构里:

常见问题

转换后的文档里多出一行 Evaluation Warning

原因：未授权的 Spire.PDF 会在输出文档中插入一行 Evaluation Warning : The document was created with Spire.PDF for JavaScript.。它是按调用次数追加的——对同一份文件转换两次，这行警告就会出现两次。

解决：申请 30 天临时许可证后，输出文档不再带这行警告。详见文末「获取免费许可证」。

转灰度后文件的体积为什么变小了

原因：灰度化的做法是把彩色图像重新编码为单通道的 DeviceGray 图像，占用的空间随通道数一同下降。示例文档里的三个彩色图表原本是 3 通道 PNG、合计约 68 KB，转换后为 33 KB；整个文件由 119 KB 降到 82 KB。

解决：这是图像重编码的正常结果，不需要额外处理。文档的页数与文字内容都不变，文字仍可搜索、复制，只有颜色被改写。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。