耀极客论坛

 找回密码
 立即注册
查看: 769|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 01:12:36 | 显示全部楼层 |阅读模式
  在页面进行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);
  1. axios({
  2.                 method: 'get',
  3.                 url:url,
  4.                 headers: {
  5.                     "token":auth,
  6.                 },
  7.                 responseType: 'blob',
  8.             }).then(response => {
  9.                 type_ = type_.toLowerCase();
  10.                 if (type_ == "docx") {
  11.                     that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  12.                 } else if (type_ == "doc") {
  13.                     that._type_ = "application/msword"
  14.                 } else if (type_ == "gif") {
  15.                     that._type_ = "image/gif"
  16.                 } else if (type_ == "jpeg" || type_ == "jpg") {
  17.                     that._type_ = "image/jpeg"
  18.                 } else if (type_ == "png") {
  19.                     that._type_ = "image/png"
  20.                 } else if (type_ == "pdf") {
  21.                     that._type_ = "application/pdf"
  22.                 } else if (type_ == "txt") {
  23.                     that._type_ = "text/plain;charset=utf-8'"
  24.                 } else if (type_ == "xls") {
  25.                     that._type_ = "application/vnd.ms-excel"
  26.                 } else if (type_ == "xlsx") {
  27.                     that._type_ = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  28.                 }else if (type_ == "zip") {
  29.                     that._type_ = "application/zip"
  30.                 } else if (type_ == "ppt") {
  31.                     that._type_ = "application/vnd.ms-powerpoint"
  32.                 } else if (type_ == "pptx") {
  33.                     that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation"
  34.                 }
  35.                if(type_ == "pdf"){
  36.                     var blob = new Blob([response.data], { type: that._type_ })
  37.                     var href = window.URL.createObjectURL(blob); //创建下载的链接
  38.                     window.open("/build/generic/web/viewer.html?file="+href);
  39.                 }
  40.             })
复制代码
  最后
  如果你想要的禁掉pdf文件的下载、打印等功能,最简单的方法是,找的自己导入文件里的viewer.html,路径为build下的generic文件夹下的web里的viewer.html,如下:

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

  如果有人问这样也不安全,那可以和客户商量不在页面展示,因为只要页面可以看到的东西,截屏也可以截下来,注定是不安全的。
  到此这篇关于vue使用pdf.js来进行pdf预览的文章就介绍到这了,更多相关vue使用pdf.js预览pdf内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:35 , Processed in 0.077958 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表