Скачать файл с php сервера с помощью vuejs

Question

Мое приложение работает на CakePHP с vuejs в качестве интерфейсной среды js.

Я делаю запрос axios на сервер для генерации выходного файла, и файл генерируется в папке webroot файла cakephp.

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

Как я могу скачать сгенерированный файл через vuejs?

Answer 1

Вам нужно передать responseType как blob в вызове axios.Примерно так:

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

И затем, когда обещание разрешает сгенерировать элемент 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();
})

Я предполагаю, что выПри загрузке изображения вам необходимо изменить имя и расширение для вашего варианта использования.

Вот скрипка с полным примером.

NB: чтобы это работало (даже просто вызов GET), ваша политика CORS должна разрешить этот вызов.