Vue預(yù)覽PDF的兩種方法比較(vue-pdf-embed與pdfjs-dist)

更新時間：2025年08月17日 09:38:51 作者：VipSoft

這篇文章主要為大家詳細(xì)介紹了Vue預(yù)覽PDF的兩種方法比較,即vue-pdf-embed與pdfjs-dist,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

簡介

Vue PDF預(yù)覽，vue-pdf-embed 與 pdfjs-dist 的比較

如果 PDF < 5MB → 用 vue-pdf-embed（簡單快捷）。
如果 PDF > 5MB → 用 pdfjs-dist + 分頁懶加載（穩(wěn)定可控）。

PDFJS.getDocument TypeError: Cannot read from private field

pnpm install pdfjs-dist@2.14.305 --save

package.json，pdfjs-diist版本使用@2.11.338，高版本會報錯

"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"
  }

vue-pdf-embed 與 pdfjs-dist 的比較與選擇

主要區(qū)別

特性	vue-pdf-embed	pdfjs-dist
性質(zhì)	Vue專用封裝組件	PDF.js的純JS庫
集成難度	簡單，開箱即用	需要自行實現(xiàn)渲染邏輯
功能完整性	基礎(chǔ)功能完善	功能最全面
自定義程度	有限，通過props配置	完全自定義
維護性	社區(qū)維護	Mozilla官方維護
體積	較小(封裝后)	較大(完整功能)
文檔支持	社區(qū)文檔	官方完善文檔

應(yīng)用場景

推薦使用vue-pdf-embed的情況：

快速在Vue項目中集成PDF預(yù)覽功能
不需要高度自定義的PDF渲染
項目時間緊迫，需要快速實現(xiàn)
只需要基礎(chǔ)查看功能(縮放、翻頁等)
項目對包體積較敏感

推薦使用pdfjs-dist的情況：

需要深度自定義PDF渲染(如自定義工具欄、注釋系統(tǒng))
需要高級功能(文本選擇、搜索、表單填寫等)
項目已在使用PDF.js相關(guān)生態(tài)
需要處理特殊的PDF渲染需求
需要直接訪問PDF.js底層API

具體推薦

對于大多數(shù)Vue項目 -推薦 vue-pdf-embed

優(yōu)勢：

// 使用極其簡單
<template>
  <vue-pdf-embed 
    :source="pdfUrl" 
    :page="currentPage"
    @rendered="onRendered"
  />
</template>

幾行代碼即可實現(xiàn)完整功能
內(nèi)置分頁、縮放等常見功能
專為Vue設(shè)計，響應(yīng)式集成好
避免直接操作PDF.js的復(fù)雜性

需要高級功能時 -推薦 pdfjs-dist

典型復(fù)雜場景：

// 自定義渲染示例
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;
}

綜合建議

1.優(yōu)先嘗試 vue-pdf-embed - 能滿足80%的常規(guī)需求，開發(fā)效率高

2.遇到特殊需求再考慮 pdfjs-dist - 當(dāng)需要：

深度定制UI/交互
實現(xiàn)復(fù)雜注解功能
處理加密/特殊格式PDF
需要文本提取等底層操作

3.混合使用策略：

// 可以用vue-pdf-embed作為基礎(chǔ)，配合pdfjs-dist擴展功能
import { getDocument } from 'pdfjs-dist';

// 在vue-pdf-embed之外獲取文檔元數(shù)據(jù)
const loadPdfMeta = async (url) => {
  const pdf = await getDocument(url).promise;
  return {
    numPages: pdf.numPages,
    metadata: await pdf.getMetadata()
  };
}

性能考量

對于大型PDF文檔，pdfjs-dist可能更有優(yōu)勢，可以手動控制內(nèi)存和渲染優(yōu)化
對于移動端，vue-pdf-embed的封裝優(yōu)化通常更好
服務(wù)端渲染場景，兩者都需要特殊處理，但vue-pdf-embed集成更簡單

最終選擇應(yīng)基于項目具體需求，但現(xiàn)代Vue項目中，vue-pdf-embed在大多數(shù)情況下都是更優(yōu)選擇。

對于 20MB 的大 PDF 文件，推薦使用 pdfjs-dist 而不是 vue-pdf-embed，原因如下：

為什么pdfjs-dist更適合大文件

1.更精細(xì)的加載控制

可以手動實現(xiàn) 分頁加載（懶渲染），避免一次性渲染所有頁面導(dǎo)致卡頓。
支持 漸進(jìn)式渲染，先顯示已加載的部分，提升用戶體驗。

2.內(nèi)存管理更優(yōu)

可以手動釋放不再使用的頁面內(nèi)存，避免瀏覽器崩潰。

3.支持 Worker 多線程

PDF.js 默認(rèn)使用 Web Worker 解析 PDF，避免阻塞主線程。

4.可自定義緩存策略

大文件可以分段加載（range request），減少初始等待時間。

示例代碼（基于pdfjs-dist優(yōu)化大文件加載）

<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";

// 設(shè)置 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[]>([]); // 當(dāng)前可見的頁（避免一次性渲染全部）

// 加載PDF文檔（但不會立即渲染所有頁）
const loadPdf = async () => {
  loading.value = true;
  try {
    const loadingTask = PDFJS.getDocument({
      url: pdfUrl,
      rangeChunkSize: 65536, // 分塊加載（優(yōu)化大文件）
    });
    pdfDoc.value = await loadingTask.promise;
    pageCount.value = pdfDoc.value.numPages;
    // 默認(rèn)只加載第一頁
    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;
};

// 翻頁時動態(tài)加載
const handlePageChange = (newPage: number) => {
  if (!visiblePages.value.includes(newPage)) {
    visiblePages.value.push(newPage);
    renderPage(newPage);
  }
};

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