pdf预览引发的vue项目只允许Chrome浏览器访问

前言：

项目中需要把原本下载pdf功能改成在线预览，只能预览不能进行其他操作，通过在地址后面拼接参数可以隐藏掉工具栏，但是只对chrome生效，所以又增加了访问权限，只对chrome浏览器开放,记录一下

一、pdf在线预览，后端返回流文件，前端window.open打开

通过添加"#view=FitH,top&toolbar=0"

interface OPTIONSTYPE {url: String,method: String,params: Object
}
export function onlineViewPdf(optionsz:OPTIONSTYPE) {const { url, method, params } = options;let config = {url: url,method: method,responseType: "blob",params: params,headers: {"X-Access-Token": getStore("token") ? getStore("token") : ""}};axios(config).then(response => {let data = response.data;// 请求失败，后台返回jsonif (data.type.includes("application/json")) {let reader = new FileReader();reader.onload = function (event) {let result = reader.result;let message = JSON.parse(result).message;// TODO 错误处理(Message).closeAll();Message.error(message || "");};reader.readAsText(data);return true;}//请求成功，在线预览const content = data;const blob = new Blob([content], {type: "application/pdf;chartset=UTF-8"});let fileURL = `${URL.createObjectURL(blob)}#view=FitH,top&toolbar=0`window.open(fileURL);});
}

该效果只能在谷歌浏览器中生效，所以又提出限制浏览器访问项目

二、判断浏览器内核

非谷歌浏览器，页面展示“”请使用谷歌浏览器访问该系统，在index.html文件里写入如下代码:

  function getBrowser() {let ua = navigator.userAgent.toLocaleLowerCase();let Browser = null;if (ua.match(/msie/) != null || ua.match(/trident/) != null) {Browser = "IE";browserVersion =ua.match(/msie ([\d.]+)/) != null? ua.match(/msie ([\d.]+)/)[1]: ua.match(/rv:([\d.]+)/)[1];return "IE";} else if (ua.match(/firefox/) != null) {Browser = "火狐";return "FF";} else if (ua.match(/ubrowser/) != null) {Browser = "UC";return "UC";} else if (ua.match(/opera/) != null) {Browser = "欧朋";return "OP";} else if (ua.match(/bidubrowser/) != null) {Browser = "百度";return "baidu";} else if (ua.match(/metasr/) != null) {Browser = "搜狗";return "SG";} else if (ua.match(/tencenttraveler/) != null ||ua.match(/qqbrowse/) != null) {Browser = "QQ";return "QQ";} else if (ua.match(/maxthon/) != null) {Browser = "遨游";return "AY";} else if (ua.match(/chrome/) != null) {let is360 = _mime("type", "application/vnd.chromium.remoting-viewer");function _mime(option, value) {let mimeTypes = navigator.mimeTypes;for (let mt in mimeTypes) {if (mimeTypes[mt][option] == value) {return true;}}return false;}if (is360) {Browser = "360";return "360";} else {return "Chrome";}} else if (ua.match(/safari/) != null) {Browser = "Safari";}}let Browser = getBrowser();if (Browser != 'Chrome') {document.body.innerHTML = '<div style="text-align:center;padding:8px;"><h4>请使用谷歌浏览器访问该系统</h4></div>';}

三、没有获取到token不可进入页面

项目中如果获取不到token值，后端会做出判断，前端通过router.beforeEach也增加一个限制

在main.js文件中增加如下代码：

router.beforeEach((to, from, next) => {if (!to.meta["out"]) {if (window.sessionStorage.getItem("token")) {next();} else {next("/");}} else {next();}
});//!to.meta["out"] 表示 排除 登录页面

router.js

pdf预览引发的vue项目只允许Chrome浏览器访问相关推荐

au如何关闭预览编辑器_VS Code如何内置Chrome浏览器？超简单
我们在使用VScode开发项目的时候,需要经常在编辑器和浏览器之间来回切换来查看页面预览效果,开发效率不是那么的高!今天就来分享下如何在VScode中实时预览html界面或vue页面. VScode预 ...
antd 实现pdf 预览_解决react项目中PDF的显示与打印问题
最近项目中有这样一个需求: 1. 页面中可以显示pdf 2. 不希望把整个页面打印下来,只打印显示PDF的部分,可以使用浏览器自带打印功能 PDF文件的显示拿到这个需求,真时一头雾水.因为没有做过类 ...
PDF预览、支持ie、谷歌等主流浏览器
PDFJS:详见本人资源列表(高版本pdfjs不支持低版本的ie) 将空间放在项目静态文件的根目录下,要不然访问服务端方法时404: 页面调用方式: 本人这个是通过后台返回文件流进行处理,所以需要调用 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
pdf预览在vue项目中的使用兼容ie浏览器
最近做项目有需求需要pdf在线预览并支持下载,而且还要兼容ie浏览器,之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容.最后使用了pdf.Js这个原生库,虽然网上有许多使用教 ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
PDF预览完整解决方案及各种兼容（VUE版）
PDF预览完整解决方案及各种兼容(VUE版) PDF预览完整解决方案及各种兼容(VUE版) - 掘金前端学习使者正在上传-重新上传取消 2021年11月12日 16:57 · 阅读 2547 一. ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...

pdf预览引发的vue项目只允许Chrome浏览器访问

前言：

一、pdf在线预览，后端返回流文件，前端window.open打开

二、判断浏览器内核

三、没有获取到token不可进入页面

pdf预览引发的vue项目只允许Chrome浏览器访问相关推荐

最新文章

热门文章