如何在vue中使用pdfjs预览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)
上面的pdf地址为自己放在本地的路径，这里路径可以为相对和绝对路径，上面为绝对路径
这时就可以看到如下效果啦：
问题
如果这个pdf文件的地址和当前下载的库文件地址在相同的域下，应该不会有太大问题的，如果不同域下就需要解决跨域的问题了。这里有个地方需要解决就是我们下载的库文件，找到viewer.js文件中下面的内容注释：
将上图中红色框框里面的内容注释。如果服务端给出的是下载地址，那么可以使用iframe嵌套来解决。
总结
其实可以看到跨域的知识有时候还是很有用的，上面就用到了，我刚开始弄的时候怎么都出不来，后面发现跨域下载不下来。当前还有更多的用法和问题，欢迎大家提出来。
以上就是如何在vue中使用pdfjs预览pdf文件的详细内容，更多关于vue中使用pdfjs预览pdf文件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了详解vue中的computed的this指向问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue组件通信传递数据的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
vue使用smooth-signature实现移动端横竖屏电子签字
这篇文章主要为大家介绍了vue使用smooth-signature实现移动端横竖屏电子签字示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
条件渲染是根据条件的真假来有条件地渲染元素,在Vue.js 3.x中,常见的条件渲染包括使用v-if指令和v-show指令,本文讲解使用v-if指令进行条件渲染,需要的朋友可以参考下2024-03-03
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下2022-05-05
这篇文章主要为大家介绍了VueJs中toRef与toRefs函数对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
vue-cli或vue项目利用HBuilder打包成移动端app操作
这篇文章主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,下面这篇文章主要给大家介绍了关于vue中ant-design-vue组件安装与使用的相关资料,需要的朋友可以参考下2022-04-04
vue3+el-table封装示例详解(编辑、删除、查看详情按钮一起封装)
在Vue3中,利用Element Plus UI库封装表格组件,实现编辑、删除和查看详情的功能,通过定义tableData和tableDataHeader来管理表格数据和表头,其中tableData通常从后端获取,而tableHeader可根据具体需求自定义,感兴趣的朋友跟随小编一起看看吧2024-09-09
这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,2024-06-06
最新评论