Vue预览PDF的两种方法比较(vue-pdf-embed与pdfjs-dist)

"dependencies": {
    "pdfjs-dist": "^2.11.338",
    "vue": "^3.5.13",
    "vue-i18n": "^11.1.2",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@types/node": "^22.13.10",
    "@types/pdfjs-dist": "^2.10.378",
    "@vitejs/plugin-vue": "^5.2.1",
    "typescript": "^5.8.2",
    "vite": "^6.2.1",
    "vue-tsc": "^2.2.8"
  }

// 使用极其简单
<template>
  <vue-pdf-embed 
    :source="pdfUrl" 
    :page="currentPage"
    @rendered="onRendered"
  />
</template>

// 自定义渲染示例
const renderPage = async (pageNum) => {
  const page = await pdf.getPage(pageNum);
  const viewport = page.getViewport({ scale: 1.5 });
  
  // 自定义canvas渲染
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  
  // 添加自定义渲染逻辑
  const renderContext = {
    canvasContext: context,
    viewport: viewport,
    // 可以添加自定义注解层等
  };
  
  await page.render(renderContext).promise;
}

// 可以用vue-pdf-embed作为基础，配合pdfjs-dist扩展功能
import { getDocument } from 'pdfjs-dist';

// 在vue-pdf-embed之外获取文档元数据
const loadPdfMeta = async (url) => {
  const pdf = await getDocument(url).promise;
  return {
    numPages: pdf.numPages,
    metadata: await pdf.getMetadata()
  };
}

<template>
  <div>
    <el-button @click="loadPdf">加载PDF</el-button>
    <div v-loading="loading">
      <div v-for="page in visiblePages" :key="page">
        <canvas :id="`pdf-page-${page}`"></canvas>
      </div>
    </div>
    <el-pagination
      layout="prev, pager, next"
      :total="pageCount"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as PDFJS from "pdfjs-dist";

// 设置 Worker 路径（必须！）
PDFJS.GlobalWorkerOptions.workerSrc =
  "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.worker.min.js";

const pdfUrl = "https://example.com/large-file.pdf"; // 20MB PDF
const loading = ref(false);
const pdfDoc = ref<any>(null);
const pageCount = ref(0);
const visiblePages = ref<number[]>([]); // 当前可见的页（避免一次性渲染全部）

// 加载PDF文档（但不会立即渲染所有页）
const loadPdf = async () => {
  loading.value = true;
  try {
    const loadingTask = PDFJS.getDocument({
      url: pdfUrl,
      rangeChunkSize: 65536, // 分块加载（优化大文件）
    });
    pdfDoc.value = await loadingTask.promise;
    pageCount.value = pdfDoc.value.numPages;
    // 默认只加载第一页
    visiblePages.value = [1];
    await renderPage(1);
  } catch (error) {
    console.error("PDF加载失败:", error);
  } finally {
    loading.value = false;
  }
};

// 渲染单页
const renderPage = async (pageNumber: number) => {
  if (!pdfDoc.value) return;
  const page = await pdfDoc.value.getPage(pageNumber);
  const canvas = document.getElementById(`pdf-page-${pageNumber}`) as HTMLCanvasElement;
  const viewport = page.getViewport({ scale: 1.5 });
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  await page.render({
    canvasContext: canvas.getContext("2d"),
    viewport,
  }).promise;
};

// 翻页时动态加载
const handlePageChange = (newPage: number) => {
  if (!visiblePages.value.includes(newPage)) {
    visiblePages.value.push(newPage);
    renderPage(newPage);
  }
};

onMounted(() => {
  loadPdf();
});
</script>