//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() },
<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) }
只是请求参数的写法不一样,其它的都是一样的
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属性值都略有差异,参考官方文档吧