vue使用pdf.js预览pdf文件的方法

我们在页面进行pdf预览的时候,由于有些文件不能够进行打印和下载,这时候我们使用window自带的pdf就很难满足客户的需求,因此需要另外的办法来支持我们进行特殊条件的pdf文件预览,这里我采用引入pdf.js文件的形式来达到目的。

第一步:下载pdf.js  

    引入pdf.js文件

    地址如下:http://mozilla.github.io/pdf.js/getting_started/

    

第二步,vue引入

  我这里是把下载下来的文件放在了根目录的piblic下

第三步,使用

  主要是地址"/build/generic/web/viewer.html?file="+href,href为请求后端返回的文件路径或者后端返回文件流前段解析后生成的文件路径,前面拼接上/build/generic/web/viewer.html?file=,地址为自己引入pdf.js文件的路径,也可以直接这样写/build/generic/web/viewer.html,他会直接去找。下面我使用的是前段解析文件流生成地址预览的。

  预览方法window.open("/build/generic/web/viewer.html?file="+href);

axios({
                method: 'get',
                url:url,
                headers: {
                    "token":auth,
                },
                responseType: 'blob',
            }).then(response => {
                type_ = type_.toLowerCase();
                if (type_ == "docx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                } else if (type_ == "doc") {
                    that._type_ = "application/msword"
                } else if (type_ == "gif") {
                    that._type_ = "image/gif"
                } else if (type_ == "jpeg" || type_ == "jpg") {
                    that._type_ = "image/jpeg"
                } else if (type_ == "png") {
                    that._type_ = "image/png"
                } else if (type_ == "pdf") {
                    that._type_ = "application/pdf"
                } else if (type_ == "txt") {
                    that._type_ = "text/plain;charset=utf-8'"
                } else if (type_ == "xls") {
                    that._type_ = "application/vnd.ms-excel"
                } else if (type_ == "xlsx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                }else if (type_ == "zip") {
                    that._type_ = "application/zip"
                } else if (type_ == "ppt") {
                    that._type_ = "application/vnd.ms-powerpoint"
                } else if (type_ == "pptx") {
                    that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
                }
               if(type_ == "pdf"){
                    var blob = new Blob([response.data], { type: that._type_ })
                    var href = window.URL.createObjectURL(blob); //创建下载的链接
                    window.open("/build/generic/web/viewer.html?file="+href);
                }
            })

最后

  如果你想要的禁掉pdf文件的下载、打印等功能,最简单的方法是,找的自己导入文件里的viewer.html,路径为build下的generic文件夹下的web里的viewer.html,如下:

  

  在这个html里找到对应下载的dom直接display:none就可以,切记不可以注掉,注掉会报错。如下,红色框中,一个是下载一个是打印,直接隐藏就可以。

如果有人问这样也不安全,那可以和客户商量不在页面展示,因为只要页面可以看到的东西,截屏也可以截下来,注定是不安全的。

到此这篇关于vue使用pdf.js来进行pdf预览的文章就介绍到这了,更多相关vue使用pdf.js预览pdf内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现在线预览pdf文件和下载(pdf.js)

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • Vue实现在线预览pdf文件功能(利用pdf.js/iframe/embed)

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

    实现效果 可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j

  • vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现. pdf.js可以从github上clone下来,然后本地gulp生成可用的pdf.js和pdf.worker.js(参考readme即可). 不过更简单的方法是使用cnpm来安装: cnpm isntall --save pdfjs-dist,然后可以在项目中使用了,

  • vue使用pdf.js预览pdf文件的方法

    我们在页面进行pdf预览的时候,由于有些文件不能够进行打印和下载,这时候我们使用window自带的pdf就很难满足客户的需求,因此需要另外的办法来支持我们进行特殊条件的pdf文件预览,这里我采用引入pdf.js文件的形式来达到目的. 第一步:下载pdf.js 引入pdf.js文件 地址如下:http://mozilla.github.io/pdf.js/getting_started/ 第二步,vue引入 我这里是把下载下来的文件放在了根目录的piblic下 第三步,使用 主要是地址"/buil

  • 如何在vue中使用pdfjs预览pdf文件

    目录 前言 在写项目的过程中,偶尔会有使用到pdf的文件,当我们想看pdf文件的时候,你的操作是不是先把pdf文件下载下来,通过电脑安装的专用于打开pdf的软件来查看pdf文件呢.如果有个需求说不要让用户安装软件呢,毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛.ok,有了这样的需求那我们是不是也得去实现嘛,毕竟这理由咱也没法反驳啊. 思考 既然都提出来了,那就想想怎么使用咯.既然需要用到pdf.不知道有没有关于js能够操作的库文件来帮我呢?果断一百度,咱们今天的主角就来

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

  • Vue-pdf实现在线预览PDF文件

    前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-

  • 如何在Windows Vista中预览PDF文件的方法

    之前我们曾介绍过Windows Vista的预览功能,即在用户不打开相应文件的情况下查看文件的具体内容,这是个相当有用的功能,可以大大提高日常工作的效率.Windows Vista预览功能可支持的对象包括图片.音频.视频.字体.文本.E-mail乃至Office文档如Word.Excel.PowerPoint文件. 不过,对于PDF(Portable Document Format)文件,则没有这么幸运了,即使在Windows Vista中安装了可以创建PDF的Office 2007后,仍然不能

  • ASP.NET MVC 项目直接预览PDF文件

    背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> &

  • Java预览PDF时的文件名称问题及解决

    目录 Java预览PDF时的文件名称 问题场景 解决思路 解决方案 预览pdf时中文乱码 第一步 第二步 Java预览PDF时的文件名称 问题场景 今天在做新项目的时候,测试提交过来一个bug:在谷歌浏览器上预览一些客户上传的pdf文件时,发现浏览器的标签上展示的要么不是我们看到的文件名,要么就直接是方法名,看起来不太合适,让我想想办法优化优化. 刚开始看到这个问题的时候确实很头疼,因为之前尝试过去解决这个问题,但是当时因为一些其他的原因,没有仔细的去思考这些个问题,这会做新项目刚好有时间去琢磨

  • vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决

    目录 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 1.先安装vue-pdf-embed 2.安装后 在使用页面引入 PS:vue3.0借用vue-pdf-embed实现在线预览pdf文件 实现效果 实现步骤 一:安装依赖 二:页面使用 三:可能报错一 问题解决 1:下载依赖 2:配置vue.config.js文件 三:可能报错二 问题原因 问题解决 vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题 本来想的很简单 觉得

随机推荐