使用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. IoT技术的最后决战!百万大奖究竟花落谁家?

    2022年5月25日华为云IoT创新应用开发大赛决赛路演正式打响! 华为云IoT创新应用开发大赛是华为云面向IoT产业领域的重量级精品赛事,自去年11月上线以来,受到了物联网协会.生态伙伴.产业基地等 ...

  2. 云图说:云数据库 RDS for MySQL一键开通读写分离,轻松应对业务高峰期

    摘要:华为云数据库 RDS for MySQL提供一键开通读写分离功能,只需要一个连接地址,让您在业务高峰期不再迷茫,不再慌乱,so easy 的应对业务. 本文分享自华为云社区<云图说 | 第 ...

  3. 基于CREATE TYPE语法自定义新数据类型

    摘要:介绍CREATE TYPE语法可以在数据库中定义一种新的数据类型. 本文分享自华为云社区<GaussDB(DWS)数据类型之自定义数据类型(复合类型)>,作者: 清道夫. CREAT ...

  4. 让数据大白于天下:GCC插件实现代码分析和安全审计

    摘要: 如何利用GCC的插件功能,辅助安全分析人员实现对程序的安全审计.漏洞检测.安全加固等自动化处理能力,提升分析效率和精准度. 本文分享自华为云社区<利用GCC插件实现代码分析和安全审计&g ...

  5. Solon 框架,想要使用 http2 怎么办?

    要使用支持 http2 的插件:solon.boot.undertow (目前,只有它支持),然后通过代码启用: @SolonMain public class SeverDemo { public ...

  6. PPT 动态迷幻图谱

    迷幻动画的本质拆解 插件: islide + 软件: PowerPoint https://www.islide.cc/ 圆型 画一个正圆,无填充色,边框 2.25磅 左边红色.右边黄色.中间两个透明 ...

  7. MySQL 错误记录:Data too long for column 'xxx' at row 1

    Content 字段是 text 类型(Text是6万多)改成了 longtext 就OK了 ALTER TABLE `Article` CHANGE `Content` `Content` LONG ...

  8. 如何安装和使用 Hugging Face Unity API

    Hugging Face Unity API 提供了一个简单易用的接口,允许开发者在自己的 Unity 项目中方便地访问和使用 Hugging Face AI 模型,已集成到 Hugging Face ...

  9. 23年校招Java开发同花顺、滴滴等面经

    前言 已经工作近半年时间了,最近突然翻到这份面经,于是想整理一下一些面试的经验,大中小公司都有 青书一面 50min 数据库.java基础. Cas机制. Tcp/udp区别 堆排序介绍,答错了,弄成 ...

  10. AtCoder Beginner Contest 210 (A~E)

    比赛链接:Here A - Cabbages 略 B - Bouzu Mekuri 略 C - Colorful Candies 用map维护连续一段区间的不同元素即可. int main() { c ...