Several ways to download different files in Vue
When you need to implement file download function in Vue, we can do it in multiple ways.
1. How to use it to download the file
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download the file2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // The URL address of the file (fileUrl);
}
}
};
</script>In the example above, we usedMethod to open a new window and directly access the URL address of the file, thereby triggering file download.
2. Use the <a> tag to download files
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download the file2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // The URL address of the file const link = ('a');
= fileUrl;
('download', fileName);
();
}
}
};
</script>In the example above, we first create a<a>Tags, then set themhrefThe attribute is the URL address of the file.downloadThe attribute is the file name to download.
Finally, by callingclick()Method triggers the link click event to realize the download of the file.
3. Use axios to download files
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download File 2</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // The URL address of the file (fileUrl, { responseType: 'blob' })
.then(response => {
const url = (new Blob([]));
const link = ('a');
= url;
('download', fileName);
(link);
();
})
.catch(error => {
(error);
});
}
}
};
</script>In the above example, we use axios to send GET request, setresponseTypeforblobIn order to obtain binary data of the file.
Then, by creating a temporary URL,<a>Tags and set download properties to realize file download.
4. Download files using the Fetch API
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download the file2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // The URL address of the file fetch(fileUrl)
.then(response => ())
.then(blob => {
const url = (blob);
const link = ('a');
= url;
('download', fileName);
(link);
();
})
.catch(error => {
(error);
});
}
}
};
</script>In the example above, we used the Fetch API to send a GET request and used.blob()The method converts the returned data into a blob object.
Then, by creating a temporary URL,<a>Tags and set download properties to realize file download.
5. Use Vue's $download method to download the file
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download the file2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // The URL address of the file this.$download(fileUrl, fileName);
}
}
};
</script>In this example, we directly call the Vue instance's$downloadMethod, and pass in the URL address of the file and the downloaded file name to realize the download of the file.
6. Download the file using the Create a tag method
<template>
<div>
<button @click="downloadFile('')">Download the file1</button>
<button @click="downloadFile('')">Download the file2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const folderPath = '/path/to/folder/'; // The folder path where the file is located const fileUrl = folderPath + fileName; // Splice folder path and file name const link = ('a');
= fileUrl;
('download', fileName);
();
}
}
};
</script>In this example, we first define the folder path where the file residesfolderPath, and then build the complete file URL address by splicing the folder path and file namefileUrl。
Next, we create a<a>Tags and set themhrefThe attribute is the file URL,downloadThe attribute is the file name to download.
Finally, by callingclick()Method triggers the link click event to realize the download of the file.
Summarize
The above are six commonly used ways to implement file download in Vue. Please select the appropriate method according to project needs to complete the file download function.
These are just personal experience. I hope you can give you a reference and I hope you can support me more.