Vue Js: Как скачать файл с помощью Axios Vue JS?
В этом уроке вы узнаете, как скачать pdf-файл или zip-файл с помощью vue js axios. Обратите внимание, что иногда вам нужно скачать изображение или любой файл с URL-адреса или Blob, Node js, React js и т. д., тогда вы можете сделать это с помощью axios js. А также можно использовать получение или отправку запроса на загрузку файла в vue js axios.
Checkbox'сы используются на странице, чтобы позволить пользователю выбрать несколько элементов из списка.
В этом руководстве вы шаг за шагом узнаете, как получить значение checkbox в приложении vue js. Кроме того, будет приведен простой пример того, как получить значение checkbox в приложении vue js с помощью v-model.
Как скачать файл с помощью Axios Vue JS?
Просто выполните следующие шаги и узнайте, как получить значение checkbox'a в приложении vue js с помощью v-model:
Шаг 1 - Создайте новое приложение VUE JS
На этом шаге откройте терминал и выполните следующую команду, чтобы создать новое приложение vue js:
vue create my-appШаг 2 - Перейдите к приложению Vue Js.
На этом шаге откройте терминал и выполните следующую команду, чтобы войти в корневой каталог приложения vue js:
cd my-app
Шаг 3 - Создать компонент
На этом этапе перейдите в каталог /src/components и создайте новый компонент с именем file-download.vue и добавьте в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>How to Download File using Axios Vue JS?</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="onclick()">DownLoad File</button>
</div>
<script type="text/jаvascript">
var app = new Vue({
el: '#app',
methods: {
onclick() {
axios({
url: 'http://localhost:8000/test.pdf',
method: 'GET',
responseType: 'blob',
}).then((response) => {
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
var fURL = document.createElement('a');
fURL.href = fileURL;
fURL.setAttribute('download', 'file.pdf');
document.body.appendChild(fURL);
fURL.click();
});
}
}
})
</script>
</body>
</html>Шаг 4 - Добавьте компонент в App.vue
На этом шаге посетите каталог /src/ и файл App.vue. А затем добавьте в него следующий код:
<template>
<FileDownload></FileDownload>
</template>
<script>
import FileDownload from './components/FileDownload';
export default {
components: {
FileDownload
}
}
</script>В этом уроке вы узнали, как скачать pdf или zip-файл с помощью vue js axios.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.