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

Question

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

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

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

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

Answer 1

您需要在 axios 调用中将 responseType 作为 blob 传递。像这样

.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 策略必须允许此调用。

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

Download file from php server with vuejs

cakephp

cakephp-3.0

vue.js