Vue3导出数据为txt文件

上述代码中，首先创建了一个Blob对象，该对象用于存储待导出的文档内容。接着，使用URL.createObjectURL()方法根据Blob对象创建了一个下载链接。然后，通过创建一个带有下载链接的a标签，并设置下载文件的名称，来实现下载操作。首先，你需要在Vue组件中创建一个方法来生成txt文档的内容。你可以使用普通的Javascript字符串操作来创建文档内容，比如将文本字符串拼接成一段段文字。

路过的假面骑士dcd

1583人浏览 · 2024-02-04 16:07:38

路过的假面骑士dcd · 2024-02-04 16:07:38 发布

在Vue3中，可以通过使用Blob对象以及URL.createObjectURL()方法导出txt文档。

首先，你需要在Vue组件中创建一个方法来生成txt文档的内容。

//res.value.code 数据源
//type：格式设置
//form.name是下载文件的自定义名字
const downLoad = ()=>{
  const blob = new Blob([res.value.code], { type: 'text/txt' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = `${form.name}.txt`;
  link.click();
  URL.revokeObjectURL(url);
}

上述代码中，首先创建了一个Blob对象，该对象用于存储待导出的文档内容。接着，使用URL.createObjectURL()方法根据Blob对象创建了一个下载链接。然后，通过创建一个带有下载链接的a标签，并设置下载文件的名称，来实现下载操作。最后，通过调用URL.revokeObjectURL()方法来释放URL对象。