js文件下载blob
使用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的更多相关文章
- js文件下载及命名(兼容多浏览器)
函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求, url携带参数 url?id=123(隐藏文件真实 ...
- JS 之Blob 对象类型
原文 http://blog.csdn.net/oscar999/article/details/36373183 什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. ...
- js 文件下载 进度条
js: /** * 下载文件 - 带进度监控 * @param url: 文件请求路径 * @param params: 请求参数 * @param name: 保存的文件名 * @param pro ...
- js 文件下载
工程WebApi: 点击按钮执行的handler exportClick() { var profile = { content: this.state.profile, type: MappingT ...
- js文件下载
因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = ...
- 原生JS使用Blob导出csv文件
最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤.格式化,然后按表格内容拼接生成csv文件,让用户下载. 具体实现方式如下:let sourceData = { head: [ '时间 ...
- 安卓请求服务器js文件下载到本地,版本号就下载
<?phpreturn array('CJ_V' => 'v0.15',) <script src="/js/reserve.js?<?=C('CJ_V')?> ...
- JS 实现blob与base64互转
/** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0]. ...
- FileSaver.js 文件下载
安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...
- 前端js实现 blob转base64位 和 base64位转blob
//**dataURL to blob** function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0]. ...
随机推荐
- 当物联网遇上云原生:K8s向边缘计算渗透中
摘要:K8s正在向边缘计算渗透,它为边缘侧的应用部署提供了便利性,在一定程度上转变了边缘应用与硬件之间的关系,将两者的耦合度降低. 本文分享自华为云社区<云原生在物联网中的应用[拜托了,物联网! ...
- 如何在上架App之前设置证书并上传应用
App上架教程 在上架App之前想要进行真机测试的同学,请查看<iOS- 最全的真机测试教程>,里面包含如何让多台电脑同时上架App和真机调试. P12文件的使用详解 注意: 同样可以 ...
- A/B 测试成为企业“新窗口”:增长盈利告别经验主义,数据科学才是未来
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 如何能够预知一个产品的未来?最好的办法当然是穿越到未来看一看. 这种"模拟未来.窥探底牌"的设 ...
- 聊一聊为什么我要整合Microsoft.Extensions.DependencyInjection和Castle.Core
前言 如果用到动态代理,大家可能会有几种选择,排到前列的是Autofac+Castle.AspectCore和DoraInterception, 我将从我当时研究的经历,以及我遇到的场景,为大家展示下 ...
- Kubernetes(K8S) 监控 Prometheus + Grafana
监控指标 集群监控 节点资源利用率 节点数 运行Pods Pod 监控 容器指标 应用程序 Prometheus 开源的 监控.报警.数据库 以HTTP协议周期性抓取被监控组件状态 不需要复杂的集成过 ...
- Kubernetes(K8S) 配置静态资源服务
Kubernetes(K8S) 配置静态资源服务 --- apiVersion: v1 kind: ConfigMap metadata: name: img-config namespace: vi ...
- python虚拟环境venv
Python3虚拟环境是为了在开发过程中隔离项目所需的 Python 环境.虚拟环境允许我们在同一台计算机上的不同项目中使用不同的 Python 版本和软件包,而不会相互干扰 首先创建一个虚拟环境的工 ...
- 🔥 DeepVideo 智能视频生产训练营火热报名中!
阿里云视频云和阿里云开发者学堂联合打造 国内首个视频云训练营11月8日启幕 四天直播,技术大咖亲临授课干货 全面介绍视频智能生产技术和产品 帮助开发者迅速入门视频云 已超千人报名,丰富打卡玩法礼品 活 ...
- #3038:How Many Answers Are Wrong (带权并查集)
HDU 3038 第一次接触带权并查集 //带权并查集 更新父节点的同时更新权值 #include<bits/stdc++.h> using namespace std; const in ...
- Educational Codeforces Round 94 (A - D题题解)
https://codeforces.com/contest/1400/problem/A Example input 4 1 1 3 00000 4 1110000 2 101 output 1 0 ...