使用axios文件下载

if (tableDataSource.selectedRowKeys.length > 0) {
//本次请求你携带token
axios.defaults.headers[
'authorization'
] = `Bearer ${store.state.login.accessToken}`
//你携带的token
axios.defaults.headers['tenantId'] =
store.state.login.tempTenant.id || ''
axios
.post(
window.globalConfig.baseUrl +
'/asset-manage-api/api/manage/asset/aa/bb', //你请求的地址
tableDataSource.selectedRowKeys, //你携带的数组
{
responseType: 'blob', // blob流进行下载
}
)
.then(res => {
let blob = new Blob([res.data], {
type: 'applicationnd.ms-excel',
})
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
window.navigator.msSaveOrOpenBlob(blob, 'fileName')
} else {
const link = document.createElement('a')
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', 'fileName')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
} else {
alert("请选择")
}

使用原生js下载文件


// 判断是否有这个属性
const createObjectURL = function (object) {
return window.URL
? window.URL.createObjectURL(object)
: window.webkitURL.createObjectURL(object)
} // 使用promise判断是否是文件流
const checkBlob = function (blob) {
return new Promise<void>((resolve, reject) => {
const fileReader = new FileReader()
fileReader.onload = function (res: any) {
const data =
res.target.result.substr(0, 1) == '{'
? JSON.parse(res.target.result)
: { success: true }
if (!data.success) {
reject(data.msg)
} else {
resolve()
}
}
fileReader.readAsText(blob)
})
} // 文件下载的主体方法
// callback是文件下载成功后的回调函数
//
app.config.globalProperties.blobFileDownLoad = function (
params,
callback
) {
if (!params.method) params.method = 'get'
const xhr = new XMLHttpRequest()
xhr.open(params.method, params.url, true)
xhr.setRequestHeader(
'Authorization',
'Bearer ' + store.state.login.accessToken
)
xhr.responseType = 'blob'
xhr.onload = function (e) {
if (this.status == 200) {
const blob = this.response
checkBlob(blob)
.then(() => {
const filename = params.name + '.xls'
const _window: any = window
if (_window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const a = document.createElement('a')
const url = createObjectURL(blob)
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
}
})
.catch(err => {
window.$message.error(err)
})
callback()
}
}
xhr.setRequestHeader('Content-type', 'application/json')
xhr.send(params.data)
}

使用pots的方式进行下载

proxy.blobFileDownLoad(
{
url:
window.globalConfig.baseUrl +
'/asset-manage-api/api/manage/asset/aa/bb',
method: 'post',
// 需要转化一下哈
data: JSON.stringify(tableDataSource.selectedRowKeys),
},
() => {
// 成功后的回调
console.log(1)
}
)

使用get的方式进行下载哈

function downLoad(type) {
proxy.blobFileDownLoad(
{
url:
window.globalConfig.baseUrl +
'/asset-manage-api/api/manage/asset/cc/qq?type=' +
type,
name:'文件名'
},
() => {
console.log(1)
}
)
}

js文件下载blob的更多相关文章

  1. js文件下载及命名(兼容多浏览器)

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...

  2. JS 之Blob 对象类型

    原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...

  3. js 文件下载 进度条

    js: /** * 下载文件 - 带进度监控 * @param url: 文件请求路径 * @param params: 请求参数 * @param name: 保存的文件名 * @param pro ...

  4. js 文件下载

    工程WebApi: 点击按钮执行的handler exportClick() { var profile = { content: this.state.profile, type: MappingT ...

  5. js文件下载

    因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = ...

  6. 原生JS使用Blob导出csv文件

    最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤.格式化,然后按表格内容拼接生成csv文件,让用户下载. 具体实现方式如下:let sourceData = { head: [ '时间 ...

  7. 安卓请求服务器js文件下载到本地,版本号就下载

    <?phpreturn array('CJ_V' => 'v0.15',) <script src="/js/reserve.js?<?=C('CJ_V')?> ...

  8. JS 实现blob与base64互转

    /** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0]. ...

  9. FileSaver.js 文件下载

    安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...

  10. 前端js实现 blob转base64位 和 base64位转blob

    //**dataURL to blob** function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0]. ...

随机推荐

  1. Linux 堡垒机命令行中如何上传下载文件(SecureCRT - SFTP)

    通过堡垒机进入的 Linux 操作系统,无法直接使用 WinSCP 等工具进行文件的上传下载. 可使用 SecureCRT 先进入命令行模式 配置 配置 Linux 堡垒机的连接方式 连接 选择要进入 ...

  2. Kubernetes(K8S) 介绍

    Master Api Server 统一入口,以 Restful 方式,交给 etcd 存储 Scheduler 节点调试,选择 Node 节点,做应用部署 Controller Manager 处理 ...

  3. 视频云AI时代,穿越市场第一,想象更多

    国际权威数据公司IDC发布<中国视频云市场跟踪(2023 H1)>报告:自2018年至今,阿里云持续保持中国视频云整体市场第一,整体市场占比达24.4%. 01 第一之外,低谷之上 近期, ...

  4. POJ 2387 Til the Cows Come Home(最短路板子题,Dijkstra算法, spfa算法,Floyd算法,深搜DFS)

    Til the Cows Come Home Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 43861 Accepted: 14 ...

  5. AtCoder ABC 206

    比赛链接:Here AB水题,跳过 C - Swappable 在数组中找到满足条件的数对 \((i,j)\) \(1 \le i < j \le N (N\in[2,3e5])\) \(A_i ...

  6. 数字孪生 3D 风电场,智慧风电之陆上风电

    前言 "十四五"期间,在传统产业数字化升级和绿色改造领域.绿色低碳城镇化和现代城市建设领域.绿色低碳消费领域,和可再生能源或电力系统建设等领域,总投资可以达到近 45 万亿,平均每 ...

  7. 五、java操作redis

    系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis --demo主方法 package com. ...

  8. vue网站换色功能

    vue.config.js里全局配置mixin.scss: 使用: 判断 sessionStorage 中的 type 是否为空,如果为空的话,就给默认的颜色(页面初始化的颜色),如果不为空的话就将对 ...

  9. Java 内存管理最佳实践

    本文翻译自国外论坛 medium,原文地址:https://medium.com/@fullstacktips/best-practices-for-memory-management-in-java ...

  10. freeswitch的mod_xml_curl模块动态获取configuration

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. mod_xml_curl模块支持从web服务获取xml配置,本文介绍如何动态获取acl配置. 环境 centos:CentOS  r ...