Vue中使用pdf.js实现PDF文档展示功能实例

npm install pdfjs-dist
# 或者
yarn add pdfjs-dist

<template>
  <div id="pdf-container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';

// 设置 pdf.js 的 worker 路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

onMounted(async () => {
  const pdfUrl = 'your_pdf_file.pdf'; // 替换为实际的 PDF 文件路径
  const pdfContainer = document.getElementById('pdf-container');

  try {
    // 加载 PDF 文件
    const pdf = await pdfjsLib.getDocument(pdfUrl).promise;

    // 遍历每一页并渲染
    for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
      const page = await pdf.getPage(pageNumber);
      const scale = 1.5;
      const viewport = page.getViewport({ scale });

      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      pdfContainer.appendChild(canvas);

      // 渲染页面到画布
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    }
  } catch (error) {
    console.error('加载 PDF 时出错:', error);
  }
});
</script>

<template>
  <div>
    <h1>PDF 展示</h1>
    <PdfViewer />
  </div>
</template>

<script setup>
import PdfViewer from './PdfViewer.vue';
</script>

pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';

const pdf = await pdfjsLib.getDocument(pdfUrl).promise;

for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
  const page = await pdf.getPage(pageNumber);
  const scale = 1.5;
  const viewport = page.getViewport({ scale });

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  pdfContainer.appendChild(canvas);

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