在项目中,后端要求下载时要进行后端的权限验证,发现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. dTree动态生成树(后台处理,简化前台操作)

    dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几分钟之内便能在页面上显示出一颗树来. 它本身给的例子是通过一些静态数据构造树,下面我说一种通过查询的数据动态构造树的方法. 例子 ...

  2. 吴裕雄--天生自然 R语言开发学习:使用ggplot2进行高级绘图(续二)

    #----------------------------------------------------------# # R in Action (2nd ed): Chapter 19 # # ...

  3. 在腾讯云centos7.2上安装配置Node.js记录

    应为爱好前端所以打算在腾讯云服务器上安装JavaScript引擎Node.js,下面是安装步骤: 安装准备: 下载node.js的.tar.xz安装包:https://nodejs.org/dist/ ...

  4. 将js进行到底:node学习1

    废话:自高中以来一直对编程充满激情,磨剑五年,如今要毕业了,我不想用我已经擅长的知识敷衍,而想以一个全新的领域去面向我的毕设--是时候学习一下node.js node.js基础 对于JavaScrip ...

  5. ubuntu采用apt-get安装pure-ftpd

    apt-get install pure-ftpdcd /etc/pure-ftpd/auth #开启虚拟账户登陆;ln -s 60auth ../conf/PureDB 60auth #查看虚拟账户 ...

  6. Zookeeper:fsync超时导致实例异常

    一.问题描述 2019-02-19 08:44左右,实时计算服务重启,报错显示找不到zk集群的leader节点,同时ZooKeeper集群有告警显示连接超时: 指标[连接耗时(ms)=18221]符合 ...

  7. React Native拆包及热更新方案 · Solartisan

    作者:solart 版权声明:本文图文为博主原创,转载请注明出处. 随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行 ...

  8. 网络编程之C10K

    网络编程之C10K 虽然在过去的十几年里C10K问题已经可以很好的解决,但学习网络编程时研究C10K问题仍然价值巨大,因为技术的发展都是有规律和线索可循的,了解C10K问题及其解决思路,通过举一反三, ...

  9. [红日安全]Web安全Day3 - CSRF实战攻防

    本文由红日安全成员: Once 编写,如有不当,还望斧正. 大家好,我们是红日安全-Web安全攻防小组.此项目是关于Web安全的系列文章分享,还包含一个HTB靶场供大家练习,我们给这个项目起了一个名字 ...

  10. C++走向远洋——61(项目一、排序函数模板)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...