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

Question

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

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

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

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

Answer 1

您需要responseType像blob在axios通话中一样传递。像这样的东西

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

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

.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();
})

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

这是一个带有完整示例的小提琴。

注意：要使其工作（即使只是 GET 调用），您的 CORS 策略必须允许此调用。