如何做产品展示网站,家居网站建设公司排名,自已建网站,免费php域名网站下载文件最简单的方式#xff0c;就是后端提供一个下载地址。前端只需要a链接绑定这个下载地址即可 a href下载地址 download下载/a download也可以等于一个值#xff0c;这个值就是文件名
但是如果后端传给我们的是一个文本或者字节流#xf…下载文件最简单的方式就是后端提供一个下载地址。前端只需要a链接绑定这个下载地址即可 a href下载地址 download下载/a download也可以等于一个值这个值就是文件名
但是如果后端传给我们的是一个文本或者字节流则就需要我们用Blob对象再进行一下处理把后端给的二进制或者文本数据利用Blob对象生成一个下载地址然后创建a链接自动触发a链接进行下载
下载json文件
templateel-button clickdownFile下载普通文件/el-button
/templatescript setup langts
import { reactive } from vue// 假装这是后端返回的文件内容
const obj reactive({name: zs,age: 25,gender: 1
})const downFile () {const blob new Blob([JSON.stringify(obj)], { type: application/json })// console.log(blob) // Blob {size: 33, type: application/json}// 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址let href window.URL.createObjectURL(blob)// 下载地址既然有了那就可以生成一个a标签直接自动点击下就可以下载了const a document.createElement(a)a.href href // a链接的下载地址a.setAttribute(download, data.json) // 把a标签设置为下载并为文件取名document.body.appendChild(a) // 把a链接插入到结构中a.click() // 自动点击触发下载// 下载完成后记得移除a标签和释放生成的下载链接document.body.removeChild(a)window.URL.revokeObjectURL(href)
}
/script
下载zip文件
templateel-button clickdownZipFile下载zip文件/el-button
/templatescript setup langts
import axios from axiosconst downZipFile () {// 请求zip文件数据 记得一定要给axios请求指定为blobaxios.get(后端给的地址, { responseType: blob }).then((res: any) {// console.log(res)// Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取const blob new Blob([res], { type: application/zip })// console.log(blob)// 创建一个指向类型化数组的 URL 其实就是把上面的blob数据转换为了一个可以下载的url地址let href window.URL.createObjectURL(blob)// 下载地址既然有了那就可以生成一个a标签直接自动点击下就可以下载了const a document.createElement(a)a.href href // a链接的下载地址// a.setAttribute(download, data.zip) // 把a标签设置为下载并为文件取名document.body.appendChild(a) // 把a链接插入到结构中a.click() // 自动点击触发下载// 下载完成后记得移除a标签和释放生成的下载链接document.body.removeChild(a)window.URL.revokeObjectURL(href)})
}
/script
下载其他文件(例如.doc.xls.ppt.tar...)也是同理的只需要改下Blob里对应的type
下面是office文件所对应的的 Content-type 类型 Content-type 类型总结
office文件所对应的的 Content-type类型Content-type类型总结 - 简书 (jianshu.com)
