使用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. 教你一个快速视频处理的神器:Python moviepy

    摘要:python 中的视频处理模块,有一个叫做 moviepy,今天我们就来唠唠它. 本文分享自华为云社区<python moviepy 的用法,看这篇就能入门>,作者: 梦想橡皮擦. ...

  2. 使用MRS CDL实现实时数据同步的极致性能

    摘要:MRS CDL旨在实现最大的数据复制吞吐量和低复制延迟. 本文分享自华为云社区<使用MRS CDL实现实时数据同步的极致性能>,作者:大数据修行者 . MRS CDL提供从多个RDB ...

  3. 用 Java?试试简单的框架 Solon v1.10.9

    Java 国产的轻量级应用开发框架.可用来快速开发 Java 应用项目.主框架仅 0.1 MB.Helloworld: @Controller public class App { public st ...

  4. PPT 动画-制作一个倒酒

    波浪往左上方,慢慢运动 数字 渐入 + 渐出 + 居中对齐 酒杯绘制 波浪绘制 上方的点全部设成[平滑顶点] https://getwaves.io/ 快速生成波浪[Office 2016 不支持插入 ...

  5. Kubernetes(K8S) 镜像拉取策略 imagePullPolicy

    镜像仓库,镜像已更新,版本没更新, K8S 拉取后,还是早的服务,原因:imagePullPolicy 镜像拉取策略 默认为本地有了就不拉取,需要修改 [root@k8smaster ~]# kube ...

  6. Windows线程开发

    Windows线程开发 1.线程基础 Windows线程是可以执行的代码实例.系统十一线程为单位调度程序.一个程序当中可以有多个线程,实现多个任务的处理. Windows线程的特点: 线程都具有1个I ...

  7. Codeforces Round #734 (Div. 3) A~D1 个人题解

    比赛链接:Here 1551A. Polycarp and Coins (签到) 题意: 我们有任意个面额为 \(1\) 和 \(2\) 的硬币去支付 \(n\) 元账单, 现在请问怎么去分配数额使得 ...

  8. 阿里云蝉联 FaaS 领导者,产品能力获最高分

    日前,权威咨询机构 Forrester 发布 The Forrester Wave: Functions-As-A-Service Platforms, Q2 2023.阿里云凭借函数计算的产品能力在 ...

  9. 【有奖体验】叮!你有一张 3D 卡通头像请查收

    立即体验基于函数计算部署[图生图]一键部署3D卡通风格模型: https://developer.aliyun.com/topic/aigc_fc 人工智能生成内容(Artificial Intell ...

  10. 每天学五分钟 Liunx 0011 | 服务篇:进程

    1. 进程 程序放在硬盘中,在运行它的时候加载到内存,在内存里程序以进程的方式运行,进程有唯一的 ID ,叫 PID.   写个简单的 Hellow world 程序,让它产生 PID: [root@ ...