在项目中,后端要求下载时要进行后端的权限验证,发现a链接进行直接下载无法满足这个需求,只能通过blob对象来进行下载操作,翻阅大量资料最后实现该功能。以下是我个人的理解,如有不足,请各位大佬多指教
// 导出excel

export function exportFile2excel(fileName, url, params) {
service.get(url, { params }).then((res) => {
if(!res){
Message({
message: '暂无可下载数据',
type: 'error',
duration: 5 * 1000
})
}else{
//该部分为主要代码,与接口衔接即可,其余部分可以忽略
const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
const urls = window.URL.createObjectURL(blob);
const a = document.createElement('a');//生成虚拟a标签
a.href = urls;
a.download = [fileName];
a.click();
window.URL.revokeObjectURL(urls);
}
})
}
在其它页面调用该方法即可
import { exportFile2excel } from '文件路径'
//导出招标文件购买记录
export function export(data) {
const fileName = 'XXX一览表'
const url = '接口路径'
const sendData={ //传输的数据
projid: data.projid,
bidid: data.bidid
}
return exportFile2excel(fileName, url, sendData )
}
在vue页面写个按钮调用该方法(export)即可
 

blob导出不同文件所需格式类型

文件后缀 content-type
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls application/vnd.ms-excel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt application/vnd.ms-powerpoint
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
前端新人,如有问题和不足之处,请指出,谢谢

vue-element框架通过blob进行后端token权限验证下载的更多相关文章

  1. .NET CORE TOKEN 权限验证

    原文:.NET CORE TOKEN 权限验证 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012601647/article/details/ ...

  2. 从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程

    从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程   用户登录与权限验证是网站不可缺少的一部分功能,asp.net MVC4框架内置了用于实现该功能的类库,只需要简单搭 ...

  3. vue + element 实现登录注册(自定义表单验证规则)

    注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...

  4. vue+iview实现动态路由和权限验证

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...

  5. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  6. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  9. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

随机推荐

  1. Day learn,day up

    前言 忽略我这个中文式英语的标题. 身为一个记性不咋地的前端渣渣,觉得平时看的一些文章太散了,特开此文作为一种记录,可谓好记性不如烂笔头,也算是逼自己要经常学习.文章的日期为最后更新时间,题目顺序不分 ...

  2. [人工智能]NumPy基础

    理解NumPy 本文主要介绍NumPy的基础知识,NumPy是一个功能强大的Python库,允许更高级的数据操作和数学计算. 什么是NumPy NumPy,来源自两个单词:Numerical和Pyth ...

  3. 2.mac下 安装go-ethereum

    Contents 上代码 A.前期准备:http://m.2cto.com/kf/201612/573010.html (1)安装python2.7,mac在终端中直接使用以下命令:brew inst ...

  4. LeetCode#476 Number Complement - in Swift

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  5. udev更改按键映射

    通过更改udev的规则实现敲击a键获得s的输出 安装evtest   首先安装evtest检测键盘的扫描码 123456789 # apt install evtest# sudo evtestNo ...

  6. Docker 运行容器 CentOS7 使用systemctl 启动报错 Failed to get D-Bus connection: Operation not permitted

    原系统:Centos 7 Docker 版本:1.12.6 操作:安装并运行 Tomcat 问题:在创建好容器之后,并且进入系统运行启动tomcat [root@cd11558d3a22 /]# sy ...

  7. IT从业者疫情之下出路何在

    作为一个IT行业十年经历的从业人员,在北京大公司工作过,但因衡量着北京大都市的繁华下高消费和高房价,选择到二线城市发展和组建家庭,由此逃离北上广,结束了数年的北漂生涯.很荣幸到了二线城市顺利遇见属于自 ...

  8. nginx 命令行参数 启动 重启 重载 停止

    今天和大家分享关于 nginx 的一些参数使用 首先,你应该安装了nginx CentOS 安装 nginx 这是很早之前的一篇博客,可以参考. 之前,我们如何去操作 nginx ##简单粗暴法 pk ...

  9. Particle Filter Algorithm

    目录 问题提出 算法研究现状 算法原理 问题提出 在现实科研问题中,其中有很多都是非线性的.要想求得问题的解,就需要非线性的算法.所谓非线性滤波,就是基于带有噪声的观测值,估计非线性系统动态变化的状态 ...

  10. Samtec大数据技术解决方案

    序言:众所周知,大数据将在AI时代扮演重要角色,拥有海量数据的公司已在多个领域尝试对掌握的数据进行利用,大数据意识和能力进步飞快,体系和工具日趋成熟. Samtec和Molex 是获得许可从而提供 M ...