Vue做pdf文件预览下载,vue 展示pdf文件内容

　　本文主要讲解如何使用pdfjs在vue中预览pdf文件。这个好处就是用户可以预览文件，不需要安装专门的软件。下面介绍如何实现这个要求。

前言

　　在写项目的过程中，偶尔会有pdf文件。当我们想看pdf文件时，是否先下载pdf文件，通过电脑上安装的软件打开查看？如果有用户不要安装软件的需求，毕竟还有很多用户不知道怎么安装软件，也不知道这个东西需要打开什么。好吧，这样的需求，我们一定要实现吗？毕竟这个理由我们是无法反驳的。

　　既然都提到了，那就想想怎么用吧。既然需要用pdf。不知道有没有js可以操作的库文件可以帮助我？果断100度，我们今天的主角来了：pdfjs。

　　既然你有了计划，让我们研究一下吧。首先，您需要下载这个库的文件。下载地址：点击我下载。这个页面会有两个页面，一个是兼容旧版本的，可以根据自己的实际情况下载。

　　下载的代码结构如下：

　　里面有两个文件夹：

　　构建是pdf核心文件。

　　Web示例

　　使用方法有两种，一种是通过核心库文件本身预览pdf，另一种是通过给定的例子预览pdf文件。这是一个带有给定示例的pdf文件的预览。有兴趣的话可以研究一下如何用核心文件来实现。

　　首先，我们需要将下载的文件放在vue项目的静态目录下，如下图所示：

　　在需要使用的地方，按以下方式调用：

　　var URL=encodeURIComponent(window . location . origin /other/202101/DC 88623 a-74c 4-49 C4-bc95-7 e 34d 9 cf 6163 . pdf )

　　window . open(window . location . origin window . location . pathname static/pdf js/web/viewer . html？file= url)

　　上面的pdf地址是你自己的本地路径，这里的路径可以是相对的，也可以是绝对的，上面的路径是绝对的。

　　此时，您可以看到以下效果：

　　如果这个pdf文件的地址和当前下载的库文件的地址在同一个域，应该没什么大问题。如果是在不同的域，就要解决跨域的问题。这里需要解决的是我们下载的库文件。在viewer.js文件中找到以下内容注释：

　　注释上图红框中的内容。如果服务器给出下载地址，可以通过iframe嵌套解决。

　　其实可以看出跨领域的知识有时候是很有用的，上面就用到了。刚开始的时候，我拿不出来。后来发现不能跨域下载了。目前有较多的用法和疑问，欢迎提问。

　　这就是如何在vue中预览pdf文件。更多关于在vue中预览pdf文件的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。