vue实现文件流文件导出json

原创已于 2022-05-24 10:40:57 修改 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-03-22 15:15:56 首次发布

js 同时被 3 个专栏收录

6 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

下载

1 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中利用file-saver库导出JSON和文本文件。通过点击按钮，用户可以将配置信息（CfgInfo）导出为'hahaha.json'，或者导出纯文本字符串到'a.txt'文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install file-saver --save

<template>
  <div class="hello">
    <button @click="exportJSON">导出jsonn</button>
    <button @click="exportText">导出Text</button>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
export default {
  data () {
    return {
      // 待导出的json数据
      CfgInfo: {
        CAN: {
          Chn: 0,
          name: 'CAN通道'
        },
        LIN: {
          Chn: 1,
          name: 'LIN通道'
        }
      }
    }
  },
  methods: {
    exportJSON () {
      // 将json转换成字符串
      const data = JSON.stringify(this.CfgInfo)
      const blob = new Blob([data], {type: ''})
      // const textStr = 'aaaaa,bbbbbbb,cccccc'
      FileSaver.saveAs(blob, 'hahaha.json')
    },
    exportText () {
      const textStr = 'aaaaa,bbbbbbb,cccccc'
      FileSaver.saveAs(textStr, 'a.txt')
    }
  }
}
</script>