Vue.js 3 中下载本地文件的方法包括:使用 HTML5 下载属性使用 JavaScript API使用 Axios 库使用 FileSaver.js 库下载文件

如何在 Vue.js 3 中下载本地文件
Vue.js 3 提供了几种方法来下载本地文件:
1. 使用 HTML5 下载属性
<code class="html"><a href="file.txt" download>下载文件</a></code>
2. 使用 JavaScript
立即学习“前端免费学习笔记(深入)”;
<code class="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();</code>3. 使用 Axios
<code class="javascript">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();
})</code>4. 使用 FileSaver.js
FileSaver.js 是一个 JavaScript 库,它提供了方便的方法来下载文件:
<code class="javascript">import FileSaver from 'file-saver'; FileSaver.saveAs(blob, 'file.txt');</code>
以上就是vue3怎么下载本地的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号