在前端项目代码中经常看到几种不同的下载文件的方法,不是很懂,这里查阅后记录一下
使用window.open方法下载文件
<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>
在上面的示例中,我们使用了window.open方法来打开一个新窗口,并直接访问文件的URL地址,从而触发文件下载。
使用<a>标签进行文件下载
<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>
在上面的示例中,我们首先创建一个<a>标签,然后设置其href属性为文件的URL地址,download属性为要下载的文件名。最后,通过调用click()方法触发链接的点击事件,实现文件的下载。
使用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>
在上面的示例中,我们使用了axios发送GET请求,设置responseType为blob以便获取文件的二进制数据。然后,通过创建临时URL、创建<a>标签并设置下载属性,实现文件的下载。
使用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>
在上面的示例中,我们使用了Fetch API发送GET请求,并使用.blob()方法将返回的数据转换为blob对象。然后,通过创建临时URL、创建<a>标签并设置下载属性,实现文件的下载。
使用Vue的$download方法下载文件
<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>
在这个示例中,我们直接调用Vue实例的$download方法,并传入文件的URL地址和下载的文件名,即可实现文件的下载。
以上转载自https://www.jb51.net/javascript/2987938qn.htm