图片是内容呈现与传播中最直观的形式之一，PDF 文档则保留了原始排版，广泛用于正式文件的存储与传输。在网页、小程序、社交平台或邮件中展示 PDF 内容时，直接分发 PDF 往往不够方便，先将其转换为 PNG、JPEG 等图片格式可以快速预览与分享；反之，将扫描件或图片素材统一转换为 PDF，则便于批量归档与跨平台分发。实际业务中经常需要在两种形式间灵活切换：将 PDF 合同转为图片用于在线预览和快速分享，或者将扫描的图片素材转为 PDF 以便统一归档与传阅。

Spire.PDF for JavaScript 基于 WebAssembly 在浏览器端直接完成 PDF 与图片之间的双向转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• PDF 转图片
• 图片转 PDF

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

转换 PDF 到图片

PDF 转图片的核心在于将 PDF 文档中的每一页内容、字体和图形元素渲染为独立的位图数据。Spire.PDF for JavaScript 通过 PdfDocument 对象的 SaveAsImage 方法逐页生成图像流，循环遍历 Pages.Count 张页面后使用 stream.Save 将每一页保存为 PNG 图片，最后借助 JSZip 把多张图片打包为 ZIP 文件以便一次性下载，全程无需手动处理像素与页面坐标的映射。

import JSZip from "jszip";

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

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

    // 将 PDF 文件与字体载入 VFS
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = '花卉.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 创建输出目录（存放转换后的图片）
    let outputDirectoryName = "图片/";
    window.dotnetRuntime.Module.FS.mkdirTree(outputDirectoryName);

    // 循环每一张页面并保存到图片
    for (let i = 0; i < doc.Pages.Count; i++) {
      const outputFileName = outputDirectoryName + "转换_" + i + ".png";
      let stream = doc.SaveAsImage({ pageIndex: i });
      stream.Save(outputFileName);
      stream.Dispose();
    }

    doc.Dispose();

    // 从 VFS 读取转换后的文件，触发下载
    const zip = new JSZip();
    let items = await window.dotnetRuntime.Module.FS.readdir(outputDirectoryName);
    items = items.filter((item) => item !== "."

      && item !== "..");
    for (const item of items) {
      const itemPath = `${outputDirectoryName}/${item}`;
      const fileData = await window.dotnetRuntime.Module.FS.readFile(itemPath);
      zip.file(item, fileData);
    }

    // 将 ZIP 转为 Blob 并触发浏览器下载
    const zipBlob = await zip.generateAsync({ type: "blob" });
    const url = URL.createObjectURL(zipBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '图片';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF To Image</h1>
      <button onClick={convertToImage}>
        Generate
      </button>
    </div>
  );
}

export default App;

通过 SaveAsImage 方法将 PDF 每一页导出为 PNG 图片并打包为 ZIP 后下载

调整导出图片的 DPI 分辨率

通过 SaveAsImage 方法导出图片时默认使用 96 DPI，图片适合屏幕预览，但放大查看时文字和线条可能出现锯齿或模糊。若需要更清晰的图片，可以在 SaveAsImage 的参数中通过 dpiX 和 dpiY 指定分辨率，例如设置为 150 DPI：

// 以 150 DPI 的分辨率逐页导出图片
for (let i = 0; i < doc.Pages.Count; i++) {
  let stream = doc.SaveAsImage({ pageIndex: i, dpiX: 150, dpiY: 150 });
  stream.Save(outputDirectoryName + "高清_" + i + ".png");
  stream.Dispose();
}

DPI 值越大，导出图片越清晰，但文件体积也会随之增大，建议根据实际使用场景在清晰度与文件大小之间权衡取舍。

转换图片到 PDF

图片转 PDF 通常用于将扫描件或设计素材统一归档为 PDF。Spire.PDF for JavaScript 通过 PdfDocument 对象创建新文档，用 PdfImage.FromFile 方法加载图片，再借助 Pages.Add 添加页面并通过 Canvas.DrawImage 方法将图片按原始尺寸绘制到页面上，最后使用 SaveToFile 方法指定 FileFormat.PDF 保存为标准 PDF 文档。

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

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

    // 将图片文件载入 VFS
    const inputFileName = '风景图.png';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 创建 PdfDocument 对象
    let doc = new pdfModule.PdfDocument();

    // 添加一页
    let page = doc.Pages.Add();

    // 加载图片
    let image = pdfModule.PdfImage.FromFile(inputFileName);

    // 计算缩放比例，使图片完整适配页面
    let widthFitRate = image.PhysicalDimension.Width / page.Canvas.ClientSize.Width;
    let heightFitRate = image.PhysicalDimension.Height / page.Canvas.ClientSize.Height;
    let fitRate = Math.max(widthFitRate, heightFitRate);

    // 计算图片缩放后的尺寸
    let fitWidth = image.PhysicalDimension.Width / fitRate;
    let fitHeight = image.PhysicalDimension.Height / fitRate;

    // 绘制图片到页面
    page.Canvas.DrawImage({ image: image, x: 0, y: 30, width: fitWidth, height: fitHeight });

    const outputFileName = '图片转PDF.pdf';

    // 保存为 PDF 格式
    doc.SaveToFile({ fileName: outputFileName, fileFormat: pdfModule.FileFormat.PDF });
    doc.Close();

    // 从 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>Convert Image To PDF</h1>
      <button onClick={convertImageToPDF}>
        Generate
      </button>
    </div>
  );
}

export default App;

通过 PdfImage.FromFile 加载并使用 Canvas.DrawImage 绘制图片后生成的 PDF 文档

从内存流加载图片

除了通过 PdfImage.FromFile 从文件直接加载，还支持通过 PdfImage.FromStream 方法从内存流加载图片。这种方式适合图片数据来自接口响应、数据库字段，或需要先读取字节再处理的场景。参考下面代码：

// 从 VFS 读取图片字节并构造内存流
let bytes = window.dotnetRuntime.Module.FS.readFile(inputFileName);
let stream = new pdfModule.Stream(bytes);

// 通过内存流加载图片
let image = pdfModule.PdfImage.FromStream(stream);

后续同样可以沿用 page.Canvas.DrawImage 方法将图片绘制到 PDF 页面，再使用 SaveToFile 方法保存为标准 PDF 文档。

常见问题

转换后的图片文字出现乱码

原因：PDF 依赖字体嵌入来保证跨平台显示一致性，如果输入 PDF 使用了未嵌入的字体且 VFS 中未加载对应字体文件，转换后可能出现文字显示异常。

解决：确保在调用转换前已将所需的 TrueType 字体文件（如 ARIALUNI.TTF）加载到 VFS 的 /Library/Fonts/ 目录下。ARIALUNI.TTF 包含了常用的中日韩文字符，是保证转换质量的首选字体。

支持转换为哪些图片格式

原因：不同的业务场景需要不同的位图格式，例如网页预览常用 PNG、摄影图片常用 JPEG 等。

解决：Spire.PDF for JavaScript 支持将 PDF 渲染为 PNG、JPEG、BMP等常见位图格式。使用 SaveAsImage 生成图像流后，在 stream.Save 保存时只需将输出文件名的扩展名替换为目标格式（如 .jpg、.bmp、.png），即可输出对应的图片格式。

获取免费许可证

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