VuePDF 安装与配置指南

1. 项目基础介绍

VuePDF 是一个基于 Vue 3 的客户端组件，它允许用户灵活地在项目中渲染 PDF 页面。该组件封装了 pdf.js 库，因此支持 pdf.js 的所有主要功能。

主要编程语言：TypeScript 和 Vue

2. 关键技术与框架

• Vue 3: 最新版本的 Vue.js，提供了 Composition API 等新特性。
• pdf.js: 一个通用的、建立在 Web 标准之上的 PDF 解析器。

3. 安装与配置

准备工作

在开始之前，请确保您的开发环境已经安装了以下依赖：

• Node.js
• npm 或 yarn 包管理器

安装步骤

步骤 1：安装 VuePDF

通过 npm 或 yarn 安装 VuePDF：

npm i @tato30/vue-pdf
# 或者
yarn add @tato30/vue-pdf

步骤 2：配置项目

在您的 Vue 3 项目中，首先需要引入 VuePDF 组件和使用 usePDF 方法。

1. 在您的 Vue 组件中，引入 VuePDF 和 usePDF：

import { VuePDF, usePDF } from '@tato30/vue-pdf';

2. 使用 usePDF 方法来加载 PDF 文件：

const { pdf } = usePDF('path/to/your/sample.pdf');

3. 在模板中使用 VuePDF 组件显示 PDF：

<template>
  <VuePDF :pdf="pdf" />
</template>

步骤 3：处理非拉丁字符

如果需要显示非拉丁字符或者遇到了字体加载错误，您需要将 node_modules/pdfjs-dist 目录下的 cmaps 文件夹复制到项目的 public 目录中。

之后，在 usePDF 方法中指定 cMapUrl：

const { pdf } = usePDF({
  url: 'path/to/your/sample.pdf',
  cMapUrl: '/cmaps/'
});

步骤 4：支持旧版浏览器

如果需要支持旧版浏览器，您需要配置 pdf.js 的旧版工人（legacy worker）。在项目中引入旧版工人并在使用 usePDF 之前设置 workerSrc：

import * as PDFJS from 'pdfjs-dist';
import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min';

PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker;

// 然后使用 usePDF

按照以上步骤，您可以成功地在 Vue 3 项目中安装和配置 VuePDF 组件。