Vue 项目中如何将 PDF（Base64）转换为图片？

前端

2023-09-02 10:53:42

在 Vue 项目中，将 PDF（Base64）转换为图片是一个常见的需求。虽然网上有很多教程，但它们往往不够详细，导致实现过程中遇到各种问题。本文将深入浅出地讲解如何轻松实现这一转换，并分享在过程中遇到的坑。

前言

在某些情况下，我们需要在前端展示 PDF 文档。然而，PDF 是一种矢量格式，直接在 HTML 中显示可能会出现问题。因此，将其转换为图片格式（如 PNG 或 JPEG）至关重要。

步骤

以下是如何在 Vue 项目中将 PDF（Base64）转换为图片的步骤：

导入所需库： 安装 pdfjs-dist 库，它提供了解析 PDF 文档所需的 API。
使用 pdfjsLib 渲染 PDF： 使用 pdfjsLib API 加载并渲染 PDF 文档，将结果存储在画布元素中。
获取画布数据： 一旦 PDF 渲染到画布，就可以使用 canvas.toDataURL() 方法获取其数据，将其转换为 Base64 编码的图片。
显示图片： 将转换后的图片 Base64 数据绑定到 Vue 组件的 src 属性，以在界面上显示它。

示例代码

import pdfjsLib from 'pdfjs-dist';

export default {
  mounted() {
    // 加载 PDF 文档
    pdfjsLib.getDocument(this.pdfBase64).promise.then((pdf) => {
      // 获取第一页
      pdf.getPage(1).then((page) => {
        // 渲染到画布
        const viewport = page.getViewport({ scale: 1 });
        const canvas = document.createElement('canvas');
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        const ctx = canvas.getContext('2d');
        page.render({ canvasContext: ctx, viewport }).promise.then(() => {
          // 获取图片数据
          const imageData = canvas.toDataURL('image/png');
          // 显示图片
          this.imageData = imageData;
        });
      });
    });
  },
};