vue中有什么方法可以实现直接预览pdf

来源：恒创科技编辑：恒创科技编辑部

2024-01-21 01:20:59

这篇文章将为大家详细讲解有关“vue中有什么方法可以实现直接预览pdf”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在写项目的过程中，偶尔会有使用到pdf的文件，当我们想看pdf文件的时候，你的操作是不是先把pdf文件下载下来，通过电脑安装的专用于打开pdf的软件来查看pdf文件呢。如果有个需求说不要让用户安装软件呢，毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛。ok，有了这样的需求那我们是不是也得去实现嘛，毕竟这理由咱也没法反驳啊。

思考

既然都提出来了，那就想想怎么使用咯。既然需要用到pdf。不知道有没有关于js能够操作的库文件来帮我呢？果断一百度，咱们今天的主角就来了：pdfjs。

库目录解析和下载

既然有了方案，那就去研究研究了，首先需要去下载这个库的文件，下载地址：点我下载。这个页面会有两个，一个是兼容旧版的，大家可以根据自己的实际情况下载啊。

下载后的代码结构如下图：

这里面有两个文件夹：

build 这里面是pdf核心文件 web 例子

使用方法

有两种使用方法，一种是通过核心库文件自己去实现pdf的预览，还有一种是通过给的例子去预览pdf文件。这里呢就以给的例子来预览pdf文件，如果大家有兴趣可以去研究研究怎么用核心文件去实现咯。

文件位置

首先我们需要将下载好的文件放到vue项目的static静态目录下，如下图：

实际调用

在需要用到的地方使用如下方式调用：

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
window.open(window.location.origin + window.location.pathname+'static/pdfjs/web/viewer.html?file='+url)