使用Vue.js集成pdf.js實現在線瀏覽PDF文件

PDF格式已成為在線共享文檔和電子書籍的標準格式之一。在以Vue.js為主要開發框架的項目中，我們可以使用pdf.js實現在線瀏覽PDF文件的功能。pdf.js是基於JavaScript的PDF文檔渲染庫，可以在瀏覽器中直接渲染PDF文件而不需要插件。

一、安裝依賴

在使用Vue.js集成pdf.js之前，我們需要安裝相關依賴。

npm install pdfjs-dist

這將在項目中安裝pdf.js的核心文件。

二、創建Vue組件

創建一個Vue組件來承載pdf.js渲染的PDF文件。

<template>
  <div class="pdf-viewer">
    <canvas ref="pdfCanvas" width="100%"/>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PdfViewer',
  props: ['src'],
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0,
      scale: 1,
    };
  },
  async mounted() {
    this.pdf = await pdfjsLib.getDocument(this.src).promise;
    this.totalPages = this.pdf.numPages;
    this.renderPage(this.currentPage);
  },
  methods: {
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: this.scale });

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

<style scoped>
.pdf-viewer {
  width: 100%;
}
</style>

以上代碼中，我們首先在Vue組件的template中創建了一個<canvas>元素，用來顯示PDF的內容。然後在mounted鉤子函數中使用pdfjsLib.getDocument()方法加載PDF文件，獲取PDF文件總頁數並調用renderPage()方法渲染第一頁。在methods中的renderPage()方法中使用pdf.getPage()方法獲取指定頁數的PDF頁，使用canvas元素及renderContext渲染出頁面視圖。

三、使用PdfViewer組件

現在我們可以在Vue.js項目的其他組件中使用PdfViewer組件來展示PDF文件。請注意，必須使用Vue.js的v-bind屬性來綁定PDF文件的URL，如下所示：

<template>
  <div>
    <PdfViewer :src="pdfUrl"/>
  </div>
</template>

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

export default {
  name: 'App',
  components: { PdfViewer },
  data() {
    return {
      pdfUrl: './example.pdf',
    };
  },
};
</script>

以上代碼使用PdfViewer組件來展示一個名為example.pdf的PDF文件。

四、控制PDF視圖

我們可以通過使用currentPage和totalPages來控制PDF文件的視圖。為了更好的用戶體驗，我們可以改變PDF文件的scale，使用戶可以縮放並拖拽文檔，觀看文檔的不同部分。

<template>
  <div class="pdf-viewer">
    <div class="pdf-controls">
      <button @click="prevPage">Previous</button>
      <span>{{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage">Next</button>
      <button @click="zoomOut">-</button>
      <button @click="zoomIn">+</button>
    </div>
    <canvas ref="pdfCanvas" width="100%"/>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist';

export default {
  name: 'PdfViewer',
  props: ['src'],
  data() {
    return {
      pdf: null,
      currentPage: 1,
      totalPages: 0,
      scale: 1,
    };
  },
  async mounted() {
    this.pdf = await pdfjsLib.getDocument(this.src).promise;
    this.totalPages = this.pdf.numPages;
    this.renderPage(this.currentPage);
  },
  methods: {
    async prevPage() {
      if (this.currentPage = this.totalPages) {
        return;
      }
      this.currentPage += 1;
      await this.renderPage(this.currentPage);
    },
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: this.scale });

      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport,
      };
      await page.render(renderContext);
    },
    zoomIn() {
      this.scale += 0.1;
      this.renderPage(this.currentPage);
    },
    zoomOut() {
      this.scale -= 0.1;
      this.renderPage(this.currentPage);
    },
  },
};
</script>

<style scoped>
.pdf-viewer {
  width: 100%;
}

.pdf-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.pdf-controls button {
  font-size: 1rem;
  padding: 0.5rem;
}

.pdf-controls span {
  font-size: 1.25rem;
}
</style>

以上代碼中，我們添加了一些控件來控制PDF的視圖，如上一頁、下一頁、縮小、放大等功能。我們使用pdf.getPage()方法獲取指定頁數的PDF頁，並使用scale控制PDF視圖的縮放大小。

總結

在這篇文章中，我們探討了如何使用pdf.js在Vue.js代碼中集成並渲染PDF文件。我們創建了一個Vue.js組件來包含pdf.js，並且在頁面上展示PDF文件，並且添加了控件，用於控制PDF文件的視圖。我們希望這將幫助你在你的Vue.js項目中實現在線瀏覽PDF文件的功能。