vue中使用PDF.js

### 在 Vue 中集成 PDF.js 实现 PDF 文件的显示与操作

#### 安装依赖库
为了在 Vue 项目中使用 `pdf.js`，首先需要安装该库。可以通过 npm 或 yarn 来完成这一步骤。

npm install pdfjs-dist --save

或者

yarn add pdfjs-dist

此命令会将 `pdf.js` 的分发版加入到项目的依赖列表之中[^1]。

#### 设置 Web Worker
由于 `pdf.js` 使用了一个 web worker 来解析 PDF 文档，因此还需要配置好相应的 worker 脚本路径：

import * as pdfjsLib from 'pdfjs-dist';
// 如果不指定workerSrc, 则会在控制台报错找不到默认位置的Worker文件.
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.js', import.meta.url).href;

这段代码设置了全局的工作线程选项，指定了工作线程脚本的位置，这对于正确加载 PDF 解析所需的资源至关重要[^2]。

#### 创建组件用于展示 PDF
创建一个新的 Vue 组件用来渲染 PDF 页面内容，在 `<template>` 部分定义一个 canvas 元素作为绘制区域，并编写 JavaScript 方法读取并呈现 PDF 数据。

<template>
  <div class="pdf-viewer">
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as pdfjsLib from "pdfjs-dist";

const props = defineProps({
  url: String,
});

let pdfDoc = null;
const pdfCanvas = ref(null);
const scale = 1.5;

async function renderPage(pageNum) {
  const page = await pdfDoc.getPage(pageNum);

  let viewport = page.getViewport({ scale });
  let context = pdfCanvas.value.getContext('2d');
  
  // Set canvas dimensions to match the viewport size
  pdfCanvas.value.width = viewport.width;
  pdfCanvas.value.height = viewport.height;

  const renderContext = {
    canvasContext: context,
    viewport,
  };
  await page.render(renderContext).promise;
}

onMounted(async () => {
  try {
    pdfDoc = await pdfjsLib.getDocument(props.url).promise;
    
    for (let num = 1; num <= pdfDoc.numPages; num++) {
      await renderPage(num); // Render each page sequentially or implement pagination logic here
    }
  } catch (error) {
    console.error(`Error loading document ${props.url}`, error);
  }
});
</script>

上述代码片段展示了如何通过传递给组件的一个 URL 参数来获取远程 PDF 并逐页渲染至画布上[^3]。

#### 处理跨域问题及优化建议
当从不同源加载 PDF 文件时可能会遇到 CORS 错误。确保服务器端已设置适当的内容安全策略头信息允许来自客户端应用域名的请求访问 PDF 资源。另外，考虑采用懒加载技术只按需加载可见页面以提高性能效率。