vue.js - 从 vue.js 生成文件下载

Question

我已经从 websocket 服务器检索了一些数据，是否可以生成文件下载事件以便用户可以将任意数据保存到磁盘？

通常人们会访问一个新的 URL 来导出数据，我正在努力避免这种情况。

Answer 1

要使用 vue.js 在内存中创建文件，您可以使用以下示例:

<div id="app">
  <a v-on:click="download()" :href="myUrl" :download="myfilename">DOWNLOAD</a>
</div>

<script>
 var app = new Vue({
  el: '#app',
  data: {
    myUrl: '#',
    myFilename: ''
  },
  methods: {
    download: function() {
      const jsonData = encodeURIComponent('{"is_valid": true}')
      this.myUrl = `data:text/plain;charset=utf-8,${jsonData}`
      this.myFilename = 'example.json'
    }
  }
})
</script>