插件窝 干货文章 vue3怎么下载本地

vue3怎么下载本地

strong 下载 使用 文件 496    来源:    2024-10-21
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) =&gt; {
  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');