2023年12月21日发(作者：)

在 Vue 3 中，要实现文件下载的功能，你可以使用浏览器的

Blob 对象和

ObjectURL() 方法。以下是一个在 Vue 3 中进行文件下载的基本用法：

1. 创建一个方法来处理文件下载：

methods: {

downloadFile() {

// 创建一个示例文件内容，这里使用简单的文本内容作为示例

const fileContent = "Hello, this is a sample file content.";

// 创建 Blob 对象

const blob = new Blob([fileContent], { type: "text/plain" });

// 创建下载链接

const url = ObjectURL(blob);

// 创建下载链接的 元素

const link = Element("a");

// 设置下载链接的属性

= url;

ad = ""; // 设置下载文件的名称

// 将 元素添加到文档中

Child(link);

// 触发点击下载链接的操作

();

// 清理创建的对象和元素

Child(link);

ObjectURL(url);

}

}

1. 在模板中调用该方法：

这个例子中，downloadFile 方法会创建一个包含文本内容的

Blob 对象，然后使用

ObjectURL() 方法为该对象创建一个下载链接。最后，创建一个

元素，设置链接的属性，触发点击操作，最后清理相关的对象和元素。

这是一个简单的例子，实际应用中你可以根据需要动态生成文件内容，并根据文件类型调整

Blob 的

type。此外，你还可以使用第三方库，如

file-saver，来更方便地处理文件下载。

# 安装 file-saver

npm install file-saver

// 在组件中使用 file-saver

import { saveAs } from 'file-saver';

// ...

methods: {

downloadFile() {

const fileContent = "Hello, this is a sample file content.";

const blob = new Blob([fileContent], { type: "text/plain" });

saveAs(blob, '');

}

}

这个库提供了更简洁的 API，尤其适用于处理文件下载。