vue使用file-saver本地文件导出功能

下面我将为您详细讲解如何使用 Vue 和 file-saver 库实现本地文件导出功能。

1. 安装 file-saver

首先需要安装 file-saver，可以使用 npm 安装，命令如下：

npm install file-saver --save

2. 使用 file-saver

在需要使用的 Vue 组件中引入 file-saver：

import { saveAs } from 'file-saver';

saveAs 方法可以帮助我们将一个 Blob 或者 File 对象保存到本地。

3. 将文本保存为本地文件

如果需要将文本保存为本地文件，可以使用以下代码：

export default {
  methods: {
    downloadText() {
      const text = 'hello world'; // 需要保存的文本内容
      const fileName = 'text.txt'; // 保存的文件名
      const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
      saveAs(blob, fileName);
    }
  }
}

上述代码中，我们首先定义了需要保存的文本内容和保存的文件名，然后通过 new Blob 方法创建了一个 Blob 对象，指定了对象的 MIME 类型为纯文本，接着调用 saveAs 方法将 Blob 对象保存到本地。

4. 将 JSON 数据保存为本地文件

如果需要将 JSON 数据保存为本地文件，可以使用以下代码：

export default {
  methods: {
    downloadJSON() {
      const data = [{id: 1, name: '张三'}, {id: 2, name: '李四'}]; // 需要保存的 JSON 数据
      const fileName = 'data.json'; // 保存的文件名
      const json = JSON.stringify(data, null, 2);
      const blob = new Blob([json], {type: 'application/json;charset=utf-8'});
      saveAs(blob, fileName);
    }
  }
}

上述代码中，我们将需要保存的 JSON 数据通过 JSON.stringify 方法转换为字符串，然后通过 new Blob 方法创建了一个 Blob 对象，指定了对象的 MIME 类型为 JSON，接着调用 saveAs 方法将 Blob 对象保存到本地。

5. 示例说明

以上两个示例分别演示了如何将文本和 JSON 数据保存为本地文件。在 Vue 组件中定义了两个方法，分别用于保存文本和 JSON 数据。在方法中封装了保存文件的具体实现，使用 saveAs 方法将数据保存为本地文件。

<template>
  <div>
    <button @click="downloadText">下载文本</button>
    <button @click="downloadJSON">下载JSON</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    downloadText() {
      const text = 'hello world';
      const fileName = 'text.txt';
      const blob = new Blob([text], {type: 'text/plain;charset=utf-8'});
      saveAs(blob, fileName);
    },
    downloadJSON() {
      const data = [{id: 1, name: '张三'}, {id: 2, name: '李四'}];
      const fileName = 'data.json';
      const json = JSON.stringify(data, null, 2);
      const blob = new Blob([json], {type: 'application/json;charset=utf-8'});
      saveAs(blob, fileName);
    }
  }
}
</script>

以上就是使用 Vue 和 file-saver 实现本地文件导出功能的完整攻略，希望对您有所帮助。