Vue2.x封装预览PDF组件

一、为什么用`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：

bash 复制代码

npm install pdfobject

2. 引入 PDFObject 并使用

在 Vue 组件中，通过 import 引入 PDFObject，并调用其 embed 方法来实现 PDF 的预览，

javascript 复制代码

<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的URL
          const pdfUrl = URL.createObjectURL(blob);
          // 现在你可以使用这个URL与PDFObject结合
           // 'pdf-container'是页面上用于展示PDF的HTML元素ID
          PDFObject.embed(pdfUrl, this.$refs.pdfViewerRef, {style: 'position: absolute'});
        });
    }
  }
}
</script>

<style scoped lang="scss">
</style>