vue 处理JSON文件——上传导入、下载导出、在线预览

上传导入JSON文件

<el-button @click="importData" size="mini">导入</el-button>

  data() {
    return {
      fileList: [],
      uploadData: [],
      dialogImport: false,

    importData() {
      this.dialogImport = true;
    },

   <el-dialog
      :visible.sync="dialogImport"
      title="导入"
      v-if="dialogImport"
      width="40%"
      append-to-body
    >
      <div style="text-align:center">
        <!-- 此处action需为有效的任意接口——当前为官网范例接口 -->
        <el-upload
          drag
          :limit="1"
          action="https://jsonplaceholder.typicode.com/posts/"
          ref="upload"
          accept=".json"
          :file-list="fileList"
          :on-success="onSuccess"
          :on-remove="onRemove"
          :on-exceed="handleExceed"
          :on-preview="handlePreview"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            上传json文件，且只能上传 1 个文件
          </div>
        </el-upload>
      </div>
      <span slot="footer">
        <el-button @click="dialogImport = false" size="mini">取 消</el-button>
        <el-button @click="importConfirm" size="mini" type="primary"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    // 上传文件超出文件数量限制/文件格式不符合要求时
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能导入一个json文件！`);
    },

    // 文件上传成功
    onSuccess(res, file, fileList) {
      let reader = new FileReader();
      reader.readAsText(file.raw);
      reader.onload = (e) => {
        this.uploadData = [];
        this.uploadData = JSON.parse(e.target.result);
      };
    },

    // 移除文件
    onRemove(file) {
      this.fileList = [];
    },

    // 导入确认
    importConfirm() {
      this.$confirm("导入后原数据会被覆盖，确定导入吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
      // 使用目标数据变量接收上传后的文件数据
        this.stockData = this.uploadData;

        this.dialogImport = false;

        this.$message({
          type: "success",
          message: "导入成功!",
        });
      });
    },

在线预览JSON文件

续上例，上传文件后，点击文件名打开预览弹窗

      jsonData: null,
      dialogPreviewJSON: false,

    handlePreview(file) {
      let reader = new FileReader();
      reader.readAsText(file.raw);
      reader.onload = (e) => {
        this.jsonData = JSON.parse(e.target.result);
        this.dialogPreviewJSON = true;
      };
    },

    <el-dialog
      :visible.sync="dialogPreviewJSON"
      title="JSON文件预览"
      v-if="dialogPreviewJSON"
      width="40%"
      append-to-body
    >
      <s-json :json="jsonData"></s-json>
    </el-dialog>

s-json.vue组件

<template>
  <div>
    <pre v-html="formattedJSON"></pre>
  </div>
</template>
<script>
export default {
  props: {
    json: Object,
  },
  mounted() {
    this.formattedJSON = syntaxHighlight(this.json);
  },
  data() {
    return {
      formattedJSON: "",
    };
  },
};

function syntaxHighlight(json) {
  if (typeof json != "string") {
    json = JSON.stringify(json, undefined, 2);
  }
  json = json
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">");
  return json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
    function(match) {
      var cls = "number";
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = "key";
        } else {
          cls = "string";
        }
      } else if (/true|false/.test(match)) {
        cls = "boolean";
      } else if (/null/.test(match)) {
        cls = "null";
      }
      return '<span class="' + cls + '">' + match + "</span>";
    }
  );
}
</script>
<style scoped>
/deep/ pre {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

/deep/ .string {
  color: green;
}

/deep/ .number {
  color: darkorange;
}

/deep/ .boolean {
  color: blue;
}

/deep/ .null {
  color: magenta;
}

/deep/ .key {
  color: red;
}
</style>

下载导出JSON文件

会下载到浏览器默认的下载位置，无法统一指定下载的路径。

需安装插件 file-saver

npm install file-saver --save

vue文件中

// 插件 -- 下载文件
import FileSaver from "file-saver";

<el-button @click="exportData" size="mini">导出</el-button>

    exportData() {
      let data = JSON.stringify(this.stockData);
      let blob = new Blob([data], { type: "application/json" });
      FileSaver.saveAs(blob, `股票数据.json`);
    },