在项目中,后端要求下载时要进行后端的权限验证,发现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 4 # # Ba ...

  2. 吴裕雄--天生自然 R语言开发学习:高级编程

    运行的条件是一元逻辑向量(TRUE或FALSE)并且不能有缺失(NA).else部分是可选的.如果 仅有一个语句,花括号也是可以省略的. 下面的代码片段是一个例子: plot(x, y) } else ...

  3. (二)一个很好用的自动生成工具——mybatis generator

    mybatis generator-自动生成代码 准备材料: 一个文件夹,一个数据库的驱动包,mybatis-generator-core-1.3.5.jar,一条生成语句 如图:(我用的是derby ...

  4. 使用 Git 删除本地仓库和远端仓库文件

    使用 git bash 来删除 一.将文件(夹)添加到暂存区 这里假设本地和远端都有一个 test.txt 文件先在本地删除,通过 ·git status 查看通过git add test.txt 添 ...

  5. Flask向模板中JS传值简便方式

    后台传值: return render_template('statistics/numberofuserlogin/login_number.html', result_json = json.du ...

  6. 菜篮子成血战场!生鲜O2O为何厮杀如此惨烈

    衣食住行作为与大众生活直接挂钩的刚需,已经被诸多互联网企业全面渗入,并在彻底颠覆大众原有的生活形态.但其中作为最底层.最基本的"菜篮子"--生鲜市场,似乎仍然没有被互联网元素完全& ...

  7. 常见WAF绕过思路

    WAF分类 0x01 云waf 在配置云waf时(通常是CDN包含的waf),DNS需要解析到CDN的ip上去,在请求uri时,数据包就会先经过云waf进行检测,如果通过再将数据包流给主机. 0x02 ...

  8. GPUImage学习总结

    GPUImage是iOS上一个基于OpenGL进行图像处理的开源框架,内置大量滤镜,架构灵活,可以在其基础上很轻松地实现各种图像处理功能. GPUImgae特性 1,丰富的输入组件 摄像头.图片.视频 ...

  9. 【Spring Data 系列学习】Spring Data JPA 基础查询

    [Spring Data 系列学习]Spring Data JPA 基础查询 前面的章节简单讲解了 了解 Spring Data JPA . Jpa 和 Hibernate,本章节开始通过案例上手 S ...

  10. All In One

    set1 https://github.com/tianhang-f... set2 https://github.com/tianhang/F... set3https://github.com/t ...