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

 更新时间:2021年12月20日 14:41:19   作者:奔跑的哈密瓜  
在页面进行pdf预览的时候,由于文件不能够打印和下载很难满足客户的需求,接下来通过本文给大家介绍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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现拖动调整左右两侧容器大小

    vue实现拖动调整左右两侧容器大小

    这篇文章主要为大家详细介绍了vue实现拖动调整左右两侧容器大小,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中el-tree结合el-switch实现开关状态切换

    vue中el-tree结合el-switch实现开关状态切换

    本文主要介绍了vue中el-tree结合el-switch实现开关状态切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • VUE中常用的四种高级方法总结

    VUE中常用的四种高级方法总结

    开发vue项目的时候一般都会开发很多自定义的全局组件,下面这篇文章主要给大家总结介绍了关于VUE中常用的四种高级方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue监听事件实现计数点击依次增加的方法

    Vue监听事件实现计数点击依次增加的方法

    今天小编就为大家分享一篇Vue监听事件实现计数点击依次增加的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue UI框架的主题切换功能实现

    Vue UI框架的主题切换功能实现

    在如今,很多网页已经可以手动切换明亮模式和黑暗模式,网页的主题切换已经成为了一个常用的需求,因此,本文将从常见框架的处理方式总结一些相关的操作,对vue ui框架主题切换功能感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue中transition组件在项目中运用小结

    vue中transition组件在项目中运用小结

    这篇文章主要介绍了vue中transition组件在项目中运用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 安装@vue/cli 报错npm WARN deprecated request@2.88.2问题

    安装@vue/cli 报错npm WARN deprecated request

    这篇文章主要介绍了安装@vue/cli 报错npm WARN deprecated request@2.88.2问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue鼠标悬停事件实例详解

    vue鼠标悬停事件实例详解

    这篇文章主要介绍了vue鼠标悬停事件,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • vue 实现单选框设置默认选中值

    vue 实现单选框设置默认选中值

    今天小编就为大家分享一篇vue 实现单选框设置默认选中值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue实现动态创建和删除数据的方法

    Vue实现动态创建和删除数据的方法

    下面小编就为大家分享一篇Vue实现动态创建和删除数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论