Vue項目中使用pdfjs-dist實現(xiàn)在線瀏覽PDF文件功能

更新時間：2025年08月13日 08:53:30 作者：好好好明天會更好

pdfjs-dist是一個用于在瀏覽器中渲染 PDF 文件的 JavaScript 庫,它能夠將 PDF 文件解析并渲染為 HTML5 的 canvas 元素,從而實現(xiàn)跨平臺、無需插件的 PDF 預覽,本文給大家介紹了Vue項目中如何使用pdfjs-dist實現(xiàn)在線瀏覽PDF文件功能,需要的朋友可以參考下

1. 安裝 pdfjs-dist

首先，通過 npm 安裝 pdfjs-dist：

npm install pdfjs-dist@2.5.207 --save

2. 配置 Worker 文件路徑

pdfjs-dist 需要一個 Worker 文件來處理 PDF 的加載和渲染。需要指定 Worker 文件的路徑：

import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry'; // 確保 worker 文件被引入

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

3. 創(chuàng)建 PDF 查看器組件

在 Vue 組件中，使用 pdfjs-dist 加載并渲染 PDF 文件：

<template>
  <div>
    <canvas v-for="page in pages" :key="page" :id="`pdf-canvas-${page}`" class="pdf-page" />
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.js',
  import.meta.url
).toString();

export default {
  data() {
    return {
      pdfUrl: 'http://example.com/path/to/your.pdf', // PDF 文件路徑
      pages: 0, // PDF 總頁數(shù)
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
      const pdf = await loadingTask.promise;
      this.pages = pdf.numPages; // 獲取 PDF 總頁數(shù)

      for (let i = 1; i <= this.pages; i++) {
        this.renderPage(pdf, i);
      }
    },
    renderPage(pdf, pageNumber) {
      pdf.getPage(pageNumber).then((page) => {
        const canvas = document.getElementById(`pdf-canvas-${pageNumber}`);
        const context = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.5 }); // 設置縮放比例
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        const renderContext = {
          canvasContext: context,
          viewport,
        };
        page.render(renderContext);
      });
    },
  },
};
</script>

<style>
.pdf-page {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>

到此這篇關于Vue項目中使用pdfjs-dist實現(xiàn)在線瀏覽PDF文件功能的文章就介紹到這了,更多相關Vue pdfjs-dist在線瀏覽PDF文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: