使用vuejs从php服务器下载文件

Question

我的应用程序在以vuejs作为前端js框架的CakePHP上运行。

我正在向服务器发出axios请求以生成输出文件，并且文件是在cakephp的webroot文件夹中生成的。

Api()
.get('/articles/downloadFile')
.then(response => {
});

如何通过vuejs下载生成的文件？

Answer 1

您需要在responseType调用中以blob的身份传递axios。像这样

.get('/articles/downloadFile', {responseType: 'blob'})

然后，当Promise解析为在DOM中生成href元素并下载该项目时。

.then((response) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'image.png');
    document.body.appendChild(link);
    link.click();
})

我假设您正在下载图像，您需要更改用例的名称和扩展名。

这是一个fiddle，带有完整的示例。

注意：要使其正常工作（甚至只是GET调用），您的CORS策略必须允许该调用。