<template>
  <div class="box">
    <input type="file" ref="inputFile" @change="handleExportFile" style="display: none" />
    <button type="button" @click="handleExportFile('click')">点击加载文件内容</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleExportFile(mark) {
      if (mark === "click") {
        this.$refs.inputFile.click();
      } else {
        this.uploadFile(this.$refs.inputFile, (content) => {
            console.log(JSON.parse(content)); //打印读取的文件内容
        });
      }
    },
    uploadFile(input, callBack){
        //支持chrome IE10  
        if (window.FileReader) {
            let file = input.files[0], filename = file.name.split(".")[0];
            let reader = new FileReader();
            reader.onload = function () {
                // console.log(this.result);
                callBack(this.result, filename)
            }
            reader.readAsText(file);
        }
        //支持IE 7 8 9 10  
        else if (typeof window.ActiveXObject != 'undefined') {
            let xmlDoc;
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.load(input.value);
            callBack(xmlDoc.xml)
        }
        //支持FF  
        else if (document.implementation && document.implementation.createDocument) {
            let xmlDoc;
            xmlDoc = document.implementation.createDocument("", "", null);
            xmlDoc.async = false;
            xmlDoc.load(input.value);
            callBack(xmlDoc.xml)
        } else {
            console.error('文件读取失败！')
        }
    }
  }
};
</script>