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');