在项目中,后端要求下载时要进行后端的权限验证,发现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. 吴裕雄--天生自然 R语言开发学习:时间序列(续一)

    #-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...

  2. centos7 上安装jira调试系统

    安装mysql数据库 在windows上面下载 http://dev.mysql.com/downloads/mysql/ 在liunx系统上可直接wget, wget https://dev.mys ...

  3. 前端自动化构建工具gulp

    1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次 ...

  4. python基础函数、方法

    python的函数和方法,通过def 定义: 函数的特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 函数和方法的区别:函数有返回值.方法没有 语法定义: def sayhi():#函数名 p ...

  5. iOS自建分发

    1.首先满足具有https证书的域名和空间.2.通常使用github或者国内第三方托管平台.3.上传ipa文件到空间内,获取ipa文件的下载地址.4.然后编辑plist文件(注意:ipa文件和plis ...

  6. HEXO+Git+Github+域名搭建个人博客

    搭建个人博客可以分为以下五个部分 一.搭建本地环境(个人为Win10) 1.安装Git,下载地址:点击 下载后,按提示进行安装即可,作用是:把本地的内容提交到github上去 注意:官网下载速度不是很 ...

  7. <pre>标签的使用

    做做笔记.碰见了一个网站,显示代码的时候自带语法高亮,这很新鲜.它的代码被pre标签包裹,原本以为pre标签下的所有的内容会以文本原来的样式输出,特意查了查发现它依然支持html标签. 先来个菜鸟教程 ...

  8. Javascript学习笔记-基本概念-语法、关键字和保留字、变量

    语法 1.区分大小写 2.标识符 所谓标识符,就是指变量.函数.属性的名字,或者函数的参数. 命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($): 其他字符可以是字母.下划线.美元 ...

  9. 手把手教你如何用MSF进行后渗透测试!

    在对目标进行渗透测试的时候,通常情况下,我们首先获得的是一台web服务器的webshell或者反弹shell,如果权限比较低,则需要进行权限提升:后续需要对系统进行全面的分析,搞清楚系统的用途:如果目 ...

  10. Spring,SpringMVC,MyBatis,SSM配置文件比较

    Spring配置文件: applicationContext.xml applicationContext.xml是Spring的核心配置文件 IOC/DI,AOP相关配置都是在这个文件中 Sprin ...