忘了说下前提了,我使用
Content-Disposition
的目的就是为了避免在ajax
请求后还要做多余的动作,也就是想去掉then
里面的操作axios.get('/export').then(res)
如果后端设置如下响应头
app.get('/export', (req, res) => {
res.set({
Content-Type: 'application/octet-stream; charset=utf-8',
Content-Disposition: attachment; filename="123.jpg"
})
res.send(file);
})
那么前端使用如下方式,或者使用form发起Post或者get请求,都能让浏览器自动保存文件
location.href = '/export'
<a href="/export" download="123.jpg">
但是,如果使用ajax发起get或者post请求,就不行,我猜想应该是ajax覆盖了浏览器自动保存的控制权,但是我找不到相关资料来佐证,有人知道吗?
axios.get('/export')
###谢邀,试试这种方法
Axios({
url: 'http://localhost/downloadFile',
method: 'GET',
responseType: 'blob', // Important
})
.then(({ data }) => {
const downloadUrl = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement('a');
link.href = downloadUrl;
link.setAttribute('download', 'file.zip'); //any other extension
document.body.appendChild(link);
link.click();
link.remove();
});
也可以使用第三方库:https://www.npmjs.com/package...
const FileDownload = require('js-file-download');
Axios({
url: 'http://localhost/downloadFile',
method: 'GET',
responseType: 'blob', // Important
}).then((response) => {
FileDownload(response.data, 'report.csv');
});
###我也做过相关操作,在ie 和chrome测试过,没有问题
let blob = new Blob([res.data]) //res 调用后台返回的文件流
let fileName = `xx.jpg` // 定义文件名
let urlObject = window.URL || window.webkitURL || window
let objectUrl = urlObject.createObjectURL(blob) //生成一个url
if ('download' in document.createElement('a')) {
// 非IE下载
let el = document.createElement('a')
//链接赋值
el.href = objectUrl
el.download = fileName
//必须点击否则不会下载
el.click()
// this.saveAs(el) // 另存为功能
//移除链接释放资源
urlObject.revokeObjectURL(objectUrl)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
###试试这种:imageSrc(图片源),name: 下载的名称;
之前写过下载,只要图片源允许下载,应该是可以用的。
function downImage(imageSrc, name) {
let image = new Image();
// 处理canvas 跨域问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL('image/png'); // 图片编码数据
let a = document.createElement('a');
let event = new MouseEvent('click'); // 创建一个单击事件
a.download = name || 'image'; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
a = null,canvas = null;
}
image.src = imageSrc;
}