vue.js 3 中下载本地文件的方法包括:使用 html5 下载属性使用 javascript api使用 axios 库使用 filesaver.js 库下载文件
如何在 Vue.js 3 中下载本地文件
Vue.js 3 提供了几种方法来下载本地文件:
1. 使用 HTML5 下载属性
<a href="file.txt" download>下载文件</a>
2. 使用 JavaScript
立即学习“前端免费学习笔记(深入)”;
// 创建一个新的 Blob 对象,其中包含要下载的文件数据
const blob = new Blob([fileData], { type: 'text/plain' });
// 创建一个新链接(anchor)元素,并设置其属性
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'file.txt';
// 触发单击该链接以启动下载
link.click();
3. 使用 Axios
import axios from 'axios';
axios({
method: 'get',
url: 'path/to/file.txt',
responseType: 'blob'
})
.then((response) => {
const blob = response.data;
// 使用 HTML5 下载属性
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'file.txt';
link.click();
})
4. 使用 FileSaver.js
FileSaver.js 是一个 JavaScript 库,它提供了方便的方法来下载文件:
import FileSaver from 'file-saver';
FileSaver.saveAs(blob, 'file.txt');