javascript实现文件下载
2021/10/12 9:14:08
本文主要是介绍javascript实现文件下载,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
javascript实现文件下载(后端返回文件流)
封装一个通用的方法
//data为后端返回得文件流,filename为文件得名称 download(data, filename) { let url = window.URL.createObjectURL( // type属性值将影响下载文件的类型 new Blob([data], { type: 'application/x-zip-compressed' }) ) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', filename) document.body.appendChild(link) link.click() },
获取文件流的方法(可能不通用)
get请求
<div @click="addclick()">下载</div> // 第一种 async addclick() { let res = await this.$axios.get('/subject/b/template/download', { responseType: 'arraybuffer', // 参数 params: { bindApplyId: '', templateId: 'CT211009134532594091', type: 1, }, }) let fileName = '文件名称.文件后缀' // 文件名除了可以写死之外,还可以通过后端返回过来的响应体中的content-disposition动态获取 // Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名,文件直接在浏览器上显示或者在访问时弹出文件下载对话框。 // 获取到之后进行相关的截取,转换即可 const disposition = res.headers['content-disposition'] // res.data 为后端返回的文件流 this.download(res.data, fileName) } // 第二种 async addclick() { // 参数直接后缀的方式写,例如 let res = await this.$axios.get('/subject/b/template/download?bindApplyId=''&templateId='CT211009134532594091'&type=1', Object.assign({ responseType: 'arraybuffer' })) // 获取fileName的方法同上 let fileName = '文件名称.文件后缀' const disposition = res.headers['content-disposition'] // res.data 为后端返回的文件流 this.download(res.data, fileName) }
post请求
只是请求参数的写法不一样,其它的都是一样的
async addclick() { // 参数直接后缀的方式写,例如 let res = await this.$axios.get('/subject/b/template/download',null,{ responseType: 'arraybuffer', params: { bindApplyId: '', templateId: 'CT211009134532594091', type: 1, } }) // 获取fileName的方法同上 let fileName = '文件名称.文件后缀' const disposition = res.headers['content-disposition'] // res.data 为后端返回的文件流 this.download(res.data, fileName) },
type属性值
对于不同的浏览器,type属性值都略有差异,参考官方文档吧
这篇关于javascript实现文件下载的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南