做自己的外贸网站怎样赚钱,网站运营优化培训,网站建立登录账号密码,wordpress主题首页文件夹前端经常会遇到下载文件的需求#xff0c;后端一般提供的以下两种方法#xff1a;
文件地址。后端直接提供要下载的文件地址#xff0c;常用于图片、音视频等静态文件文件流。后端返回文件流#xff0c;常用于excel等动态文件
一、a 标签下载
1、直接html使用a标签下载 …前端经常会遇到下载文件的需求后端一般提供的以下两种方法
文件地址。后端直接提供要下载的文件地址常用于图片、音视频等静态文件文件流。后端返回文件流常用于excel等动态文件
一、a 标签下载
1、直接html使用a标签下载
href文件链接download下载时的文件名称相当于重命名了可以不设置该属性
a hrefhttps://example.com/images/a.png downloadb.png下载/a2、通过js方法借用a标签下载
downloadFile(fileurl) {let a document.createElement(a) // 创建一个a标签a.href fileurl // 赋值链接a.style.display none // 隐藏设置元素不可见document.body.appendChild(a) // 添加a到页面a.click() // 模拟点击进行跳转或下载操作document.body.removeChild(a) // 操作完成移除a
}二、window 下载
1、window.location.href
downloadFile(fileurl) {window.location.href fileurl
}2、window.open
downloadFile(fileurl) {window.open(fileurl)
}注 window.open() 可能会被浏览器拦截器屏蔽而 window.location.href 不会受到影响
三、blob下载流文件
1、引入axios
import axios from axios2、blob下载
downloadFile() {// 文件地址可携带参数const fileurl /file/example/excel/abc?id${this.id}appId${this.appId}// 请求并下载文件可设置 headersaxios.get(fileurl, {responseType: blob, // 必须指定响应的数据类型为二进制数据流Blob对象headers: {X-Auto-Fp-Plate: example,},}).then(response {let url window.URL.createObjectURL(response.data) // 将二进制文件转化为可访问的urllet a document.createElement(a)a.href urla.style.display nonedocument.body.appendChild(a)// 一般在响应头的 content-disposition 里设置文件名称下面是提取文件名示例const arr response.headers[content-disposition].split(filename)const fileName decodeURI(arr[arr.length - 1])a.download fileName // 将获取的文件名赋值过去也可自行赋值a.click()document.body.removeChild(a)window.URL.revokeObjectURL(url) // 释放url}).catch(error {// do something})},
