使用booststrap-vue和FileReader做文件读取、file-saver做文件下载

文件读取

1. 选取本地文件

参考bootstrap-vue的form-file，来选取本地文件

<b-form-file
  v-model="dataFile"
  :state="Boolean(dataFile)"
  placeholder="选择文件"
  drop-placeholder="拖拽到这里"
  style="text-align: left;"
  size="sm"
></b-form-file>

选取到的文件存放在compenent data的dataFile中。

2. 读取文件内容

loadFile () {
  const reader = new FileReader();
  const _this = this;
  reader.readAsText(_this.dataFile);
  reader.onload = function () {
    // this.result为读取到的json字符串，需转成json对象
    _this.importJSON = JSON.parse(this.result);
  }
},

文件下载

比如我们在前端编辑了一些数据，希望将这些数据下载为json文件，查了一圈发现还是file-saver最好用。

安装

npm i file-saver

不需要在头部import，采用require的方式

saveData(){
    var FileSaver = require('file-saver');
    var data = JSON.stringify(this.graph, null, 2);
    var blob = new Blob([data], {type: "application/json;charset=utf-8"});
    FileSaver(blob, "output.json");
}

注意：这里的api与github上readme上写的已经不一样了，我目前的最新版本号2.0.2。这里不再采用FileSaver.saveAs(file)