快捷導(dǎo)航

Vue3使用pdfjs-dist實現(xiàn)PDF文件瀏覽器預(yù)覽功能

更新時間：2026年03月25日 08:38:59 作者：初級見習(xí)猿工

本文介紹在Vue3項目中集成pdfjs-dist以實現(xiàn)PDF預(yù)覽功能的過程,包括安裝步驟、創(chuàng)建Vue組件、使用方法及注意事項,涉及PDF文件來源、性能優(yōu)化、錯誤處理、樣式定制、兼容性等問題,并提供了解決方案,需要的朋友可以參考下

簡介

pdfjs-dist是一個基于PDF.js的庫，用于在瀏覽器中渲染PDF文件。結(jié)合Vue 3，可以輕松實現(xiàn)PDF預(yù)覽功能。下面介紹集成過程，包括安裝、基本使用和常見問題解決。確保項目已初始化Vue 3環(huán)境（如使用Vite或Vue CLI）。

步驟1: 安裝pdfjs-dist

首先，通過npm或yarn安裝pdfjs-dist庫。在項目根目錄下運行命令：

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

步驟2: 創(chuàng)建Vue組件

在Vue 3中，創(chuàng)建一個新組件（如PdfViewer.vue）來封裝PDF渲染邏輯。以下是基本實現(xiàn)代碼：

<template>
  <div>
    <div ref="pdfContainer" style="width: 100%; height: 600px;"></div>
    <button @click="loadPdf">加載PDF</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/web/pdf_viewer.css'; // 引入樣式

export default {
  setup() {
    const pdfContainer = ref(null);
    const pdfUrl = ref(''); // 替換為您的PDF文件URL或路徑

    // 加載PDF函數(shù)
    const loadPdf = async () => {
      try {
        // 初始化PDF.js
        const pdf = await pdfjsLib.getDocument(pdfUrl.value).promise;
        const page = await pdf.getPage(1); // 加載第一頁
        
        // 設(shè)置渲染選項
        const viewport = page.getViewport({ scale: 1.5 });
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        // 渲染到canvas
        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise;
        
        // 添加到DOM
        pdfContainer.value.innerHTML = '';
        pdfContainer.value.appendChild(canvas);
      } catch (error) {
        console.error('加載PDF失敗:', error);
      }
    };

    onMounted(() => {
      // 組件掛載后自動加載或手動觸發(fā)
      // loadPdf();
    });

    return {
      pdfContainer,
      loadPdf
    };
  }
};
</script>

步驟3: 在父組件中使用

在您的Vue應(yīng)用中使用這個組件。例如，在App.vue中：

<template>
  <div>
    <h1>PDF預(yù)覽器</h1>
    <PdfViewer />
  </div>
</template>

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

export default {
  components: {
    PdfViewer
  }
};
</script>