vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
vue浏览pdf文件
如何在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 如何执行动态js(如何利用vue.js实现拖放功能)
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue本地图片切换(vue动态加载本地图片的处理方法)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue 底层原理(浅谈Vue插槽实现原理)
- vue 父组件向子组件传值几种方法(Vue中父组件向子组件传递数据的几种方法)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- 2021款起亚霸锐到店了 更换车标,竞争宝马X5有戏吗(2021款起亚霸锐到店了)
- 新款起亚霸锐实拍,比普拉多气派,配3.0T V6,引入国内或许能大卖(新款起亚霸锐实拍)
- ()
- 张勇 阿里新任掌门人(阿里新任掌门人)
- 毛戈平全国第一柜花落银泰 高端国货迎来 高光 时刻(毛戈平全国第一柜花落银泰)
- 14岁丧父 20岁丧母,从苦难走向辉煌的银泰创始人沈国军(14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军)
热门推荐
- pycharm怎么创建django项目(Python、 Pycharm、Django安装详细教程图文)
- yii2对比springboot(Yii框架响应组件用法实例分析)
- 计算引擎flink(浅谈实时计算框架Flink集群搭建与运行机制)
- 织梦安装程序(windowsxp下织梦后台如何安装)
- sql版本号处理并发(SQL server高并发生成唯一订单号的方法实现)
- docker查看镜像详细内容(Docker镜像分析工具dive原理解析)
- pip默认镜像怎么设置(将pip源更换到国内镜像的详细步骤)
- docker与本地存储(docker 设置windows存储路径的操作)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- linq中AsEnumerable和AsQueryable的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9