PDF文件转为图片下载的实现

2024-01-22 23:20:05

PDF 文件转图片下载：分步指南

在当今数字时代，需要将 PDF 文件转换为图像的情况变得越来越普遍。无论是用于演示、存档还是在社交媒体上分享，将 PDF 文件转换为图像都是一项有价值的技能。在本教程中，我们将向您展示如何使用 JavaScript 和第三方库逐步实现 PDF 文件转图像下载功能。

先决条件

在开始之前，您需要确保满足以下先决条件：

Node.js 和 npm 已安装在您的系统上。
文本编辑器或 IDE 用于编写代码。

所需库

为了实现 PDF 转图像功能，我们需要使用以下库：

pdfjs-dist@2.3.200： 用于解析和渲染 PDF 文件。
jszip： 用于将图像压缩为 ZIP 文件。

通过以下命令安装这些库：

npm install pdfjs-dist@2.3.200 jszip

实现步骤

1. 导入库

在您的 JavaScript 文件中，导入所需的库：

import pdfjsLib from "pdfjs-dist/legacy/build/pdf.js";
import JSZip from "jszip";

2. 选择本地 PDF 文件上传

使用 HTML <input> 元素允许用户从本地选择 PDF 文件：

<input type="file" id="pdf-file" accept="application/pdf" />

在 JavaScript 中，监听 change 事件以处理文件选择：

const inputElement = document.querySelector("#pdf-file");
inputElement.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (!file) {
    return;
  }

  // ...后续步骤
});

3. 生成 PDF 文件预览

使用 pdfjsLib，我们可以渲染 PDF 文件的预览，以便用户在下载之前进行查看：

const pdfViewer = document.querySelector("#pdf-viewer");

// ...在文件选择处理程序中...

const fileReader = new FileReader();
fileReader.onload = () => {
  const arrayBuffer = fileReader.result;

  pdfjsLib.getDocument(arrayBuffer).then((pdfDocument) => {
    const numPages = pdfDocument.numPages;

    for (let i = 1; i <= numPages; i++) {
      // ...后续步骤
    }
  });
};

fileReader.readAsArrayBuffer(file);

4. 将 PDF 文件转换为图像

使用 pdfjsLib，我们可以将每页渲染为图像：

// ...在文件选择处理程序中...

for (let i = 1; i <= numPages; i++) {
  pdfDocument.getPage(i).then((page) => {
    const viewport = page.getViewport({ scale: 2 });
    const canvas = document.createElement("canvas");
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    const context = canvas.getContext("2d");
    page.render({ canvasContext: context, viewport: viewport }).then(() => {
      // ...后续步骤
    });
  });
}

5. 将图像压缩为 ZIP 文件

使用 jszip，我们可以将转换后的图像压缩为单个 ZIP 文件：

// ...在文件选择处理程序中...

const zip = new JSZip();

for (let i = 1; i <= numPages; i++) {
  // ...图像转换代码

  const imageData = canvas.toDataURL("image/png");
  zip.file(`page-${i}.png`, imageData, { base64: true });
}

// ...后续步骤

6. 下载 ZIP 文件

最后，使用 JavaScript，我们允许用户下载 ZIP 文件：

// ...在文件选择处理程序中...

zip.generateAsync({ type: "blob" }).then((blob) => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "pdf-to-images.zip";
  a.click();
});

代码示例

以下是完整代码示例：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/pdfjs-dist@2.3.200/build/pdf.js"></script>
    <script src="https://unpkg.com/jszip@3.7.1/dist/jszip.min.js"></script>
  </head>
  <body>
    <h1>PDF文件转图片下载</h1>
    <input type="file" id="pdf-file" accept="application/pdf" />
    <div id="pdf-viewer"></div>
    <button id="save-button">保存</button>
    <script>
      // ...代码示例
    </script>
  </body>
</html>