当前位置：首页 > ds >正文

Vue2.x封装预览PDF组件

ds 2025/7/17 10:54:44

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