elmentUI+vue前端导入、导出json

导入json格式文件和导出json格式文件，查了element官网及网上的一些资料。做下笔记

导入功能

 上传文件格式：

[
{
	"objectType":"1",
	"dictCode":"fsadf",
	"dictKey":"",
	"dictValue":"住客借用类型",
	"sortNumber":"0",
	"remark":"新增字典"
},
{
	"objectType":"2",
	"dictCode":"fsadf",
	"dictKey":"1",
	"dictValue":"住客借用类型",
	"sortNumber":"1",
	"remark":"新增字典"
}
]

前端代码 ：

<el-dialog :title="form.title" :visible.sync="form.importForm" :option="importOption">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="/api/sys/dict/importFile"
        :http-request="handleUploadForm"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip">只能上传json文件，且不超过500kb</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitUpload(0)">取 消</el-button>
        <el-button type="primary" @click="submitUpload(1)">确 定</el-button>
      </div>
    </el-dialog>

 

export default {
  data{
    return {
      fileList: [],
           }
      } 
  methods: {
        handleUploadForm(param) {
        let thiz = this
        let formData = new FormData()
        formData.append('file', param.file)
        formData.append('dictGroupId', thiz._uid)
        let loading = thiz.$loading({
          lock: true,
          text: '上传中，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        thiz.$axios.post('路径', formData).then(({data}) => {
          if (data.code === 0) {
            thiz.$message.success('上传文件成功')
            thiz.fileList = []
          } else {
            thiz.fileList = []
            thiz.$message.error('上传文件失败')
          }
          loading.close()
        })
      },handleRemove(file, fileList) {
        console.log(file, fileList);
      },handlePreview(file) {
        console.log(file);
      },submitUpload(type) {
        if (type === 1) {
          this.$refs.upload.submit();
          this.form.importForm = false;
        } else {
          this.form.importForm = false;
        }
      }
   }
};

传入后端接收：

@PostMapping("/importFile")
public Resp<Object> importFile(@RequestParam(value = "file") MultipartFile file,@RequestParam("dictGroupId") Integer dictGroupId) {}

 

 导出功能

导出文件格式：

[{"dictCode":"themeType","dictKey":"1","dictValue":"Android","id":279,"objectType":2,"sortNumber":1},{"dictCode":"themeType","dictKey":"2","dictValue":"IOS","id":280,"objectType":2,"sortNumber":1}]

前端代码：

<el-dialog :title="form.title" :visible.sync="form.exportForm">
      <el-table :data="exportData"
                border
                align="center"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                ref="multipleTable">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="id"
                         label="id"
                         width="150">
        </el-table-column>
        <el-table-column prop="dictCode"
                         label="字典标识"
                         width="150">
        </el-table-column>
        <el-table-column prop="dictKey"
                         label="字典项"
                         width="150">
        </el-table-column>
        <el-table-column prop="dictValue"
                         label="字典值"
                         width="150">
        </el-table-column>
        <el-table-column prop="sortNumber"
                         label="排序序号"
                         width="150">
        </el-table-column>
        <el-table-column prop="remark"
                         label="备注"
                         width="150">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeExportForm(0)">关 闭</el-button>
        <el-button type="primary" @click="closeExportForm(1)" v-show="!form.readonly">导 出</el-button>
      </div>
    </el-dialog>

 

  export default {
    data() {
      return {
        multipleSelection: [],
        exportData: [],
        form: {
          showForm: false,
          readonly: false,
          importForm: false,
          exportForm: false,
          title: '',
          data: {}
        }
      }
    },
    ids() {
        let ids = [];
        this.multipleSelection.forEach(ele => {
          ids.push(ele.id);
        });
        return ids;
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      closeExportForm(type) {
        if (type === 1) {
          this.exportFile()
          this.form.exportForm = false;
        } else {
          this.form.exportForm = false;
        }
      },
      exportFile() {
        this.$axios.post('路径?ids=', this.ids).then(resp => {
          if (data.code === 0) {
            let blob = new Blob([resp.request.response], {type: 'application/json'});
            this.downloadBlob(blob, Date.now());
            this.$message.success('导出文件成功')
          } else {
            this.$message.error('导出文件失败')
          }
        });
      },
      downloadBlob(blob, filename) {
        let objectURL = URL.createObjectURL(blob);
        const eleLink = document.createElement('a')
        eleLink.download = filename
        eleLink.style.display = 'none'
        eleLink.href = objectURL
        // 触发点击
        document.body.appendChild(eleLink)
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
      }
    }
  };

 

后端代码：

	@GetMapping("/queryByParentId")
	public Resp<ArraysVo<List<DictEntity>>> queryByParentId(@RequestParam("parentId") Integer parentId) {
	}


	@PostMapping("/exportFile")
	public Resp<ArraysVo<String>> exportFile(@RequestBody Integer[] ids) {
	}

 

 

效果图