When we need to implement the file download function in Vue, we can do it in a variety of ways. Five commonly used methods will be introduced below.
1. window.openHow to download files
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
window.open(fileUrl);
}
}
};
</script>
In the above example, we used window.opena method to open a new window and directly access the file's URL address, thereby triggering the file download.
2. Use <a>tags for file downloads
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
link.click();
}
}
};
</script>
In the above example, we first create a <a>tag, and then set its hrefproperties to the URL address of the file and downloadthe property to the name of the file to be downloaded. Finally, the click event of the link is triggered by calling click()the method to download the file.
3. Download files using axios
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
axios.get(fileUrl, {
responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
In the example above, we used axios to send a GET request, set up responseTypeto blobget the binary data of the file. <a>Then, download the file by creating a temporary URL, creating a tag, and setting download properties.
4. Download files using Fetch API
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
})
.catch(error => {
console.error(error);
});
}
}
};
</script>
In the above example, we used the Fetch API to send a GET request and used .blob()methods to convert the returned data into a blob object. <a>Then, download the file by creating a temporary URL, creating a tag, and setting download properties.
5. Use Vue’s $download method to download files
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const fileUrl = '/path/to/' + fileName; // 文件的URL地址
this.$download(fileUrl, fileName);
}
}
};
</script>
In this example, we directly call $downloadthe method of the Vue instance and pass in the URL address of the file and the downloaded file name to download the file.
6. Download files using the create a tag method
<template>
<div>
<button @click="downloadFile('file1.pdf')">下载文件1</button>
<button @click="downloadFile('file2.jpg')">下载文件2</button>
</div>
</template>
<script>
export default {
methods: {
downloadFile(fileName) {
const folderPath = '/path/to/folder/'; // 文件所在的文件夹路径
const fileUrl = folderPath + fileName; // 拼接文件夹路径和文件名
const link = document.createElement('a');
link.href = fileUrl;
link.setAttribute('download', fileName);
link.click();
}
}
};
</script>
In this example, we first define the folder path where the file is located folderPath, and then construct the complete file URL address by concatenating the folder path and file name fileUrl. Next, we create a <a>tag and set its hrefattribute to the file URL and downloadthe attribute to the name of the file to be downloaded. Finally, the click event of the link is triggered by calling click()the method to download the file.
The above are six commonly used ways to implement file downloading in Vue. Please choose the appropriate method to complete the file download function according to the project requirements.