一、為什么用PDFObject插件？

PDFObject 是一個輕量級的 JavaScript 庫，主要用于在網頁中嵌入和預覽 PDF 文件。它通過簡單的 API 調用，可以在瀏覽器中實現 PDF 文件的顯示，而無需依賴任何插件。以下將詳細介紹 PDFObject 的特點、優勢及其在 Vue2.x 中的使用方法。

1.輕量級與易用性

PDFObject 僅包含一個小型的 JavaScript 文件，無需復雜的配置即可使用。只需引入庫文件并調用 PDFObject.embed() 方法，即可在指定容器中嵌入 PDF 文件。

2.無插件依賴

它利用瀏覽器的內置 PDF 查看器（如 Chrome 的 PDFium 或 Adobe Reader 插件）來實現 PDF 的預覽，無需安裝額外的插件，如 Flash 或 Adobe Reader。

3.跨瀏覽器兼容性

PDFObject 支持主流瀏覽器，包括 Chrome、Firefox、Safari 和 Edge，同時也能兼容部分舊版瀏覽器（如 IE9+）。這種兼容性使得它在不同環境下都能穩定運行。

4.靈活的自定義選項

PDFObject 提供了多種參數來控制 PDF 的顯示效果，例如：
width 和 height：設置 PDF 的顯示尺寸。
page：指定初始顯示的頁面。
toolbar：控制工具欄的顯示或隱藏。
zoom：設置縮放比例。
navpanes：控制導航窗格的顯示或隱藏。
快速集成
在 Vue2.x 中，PDFObject 可以通過簡單的引入和調用快速集成到項目中，適合快速開發需求。

二、Vue中使用PDFObject示例

1. 安裝 PDFObject

可以通過 npm 安裝 PDFObject：

npm install pdfobject

2. 引入 PDFObject 并使用

在 Vue 組件中，通過 import 引入 PDFObject，并調用其 embed 方法來實現 PDF 的預覽，

<template><div class="preview-pdf"><div class="loading-block"><p class="loading-word">加載中...</p></div><div ref="pdfViewerRef" style="z-index: 10;"></div></div>
</template><script>
import PDFObject from 'pdfobject';export default {name: "pdf-preview",data() {return {url: '',previewUrl:""}},mounted() {this.loadPdf();},methods: {loadPdf() {let url = '后端訪問pdf路徑';fetch(url).then(response => response.arrayBuffer()).then(buffer => new Uint8Array(buffer)).then(uint8array => {// 創建Blob對象const blob = new Blob([uint8array], { type: 'application/pdf' });// 創建一個指向Blob的URLconst pdfUrl = URL.createObjectURL(blob);// 現在你可以使用這個URL與PDFObject結合// 'pdf-container'是頁面上用于展示PDF的HTML元素IDPDFObject.embed(pdfUrl, this.$refs.pdfViewerRef, {style: 'position: absolute'});});}}
}
</script><style scoped lang="scss">
</style>