解决前端项目问题，基于vue的后端接口excel文件的导入，以及纯静态前端excel导入

工具：vue2.0+element-ui+vscode

---

连接后端的动态导入 

①首先在结构层里进行布局，

创建一个点击事件@click="xxx"

 <form enctype="multipart/form-data" id="daoru">
                      <input
                        type="file"
                        name="fileup"
                        id="uploadEventFile"
                        @change="fileChange"
                        style="display: none"
                      />
                    </form>
                    <li @click="labelExcelImport">
                      <i class="el-icon-download"></i>导入
                    </li>

 ②其次在行为层里利用axios进行后端数据交互

//导入
    labelExcelImport() {
      event.preventDefault();
      document.getElementById("uploadEventFile").click();
    },
    fileChange(el) {
      // el.preventDefault(); //取消默认行为

      let uploadEventFile = document.getElementById("uploadEventFile").files;
      this.file = el.target.files[0];
      if (uploadEventFile == "") {
        this.$message({
          type: "warning",
          message: "请选择文件",
        });
      }
      let formData = new FormData(document.getElementById("daoru"));
      // 向 formData 对象中添加文件
      formData.append("file", this.file);
      const rLoading = this.openLoading();
      this.$axios({
        method: "post",
        url:
          window.serverAPI.url +
          "", //请求接口
        //请求接口的参数
        data: formData,
        // responseType: "blob",
        headers: {
          "Content-Type": "multipart/form-data", //设置请求头请求格式为JSON
          Authorization: window.sessionStorage.getItem("token"),
        },
      }).then((data) => {
        // console.log(data);
        if (data.data.code == 200) {      
           Loading.close();
           this.$notify({
           type: "error",
           dangerouslyUseHTMLString: true,
           message: data.data.data,
           position:"top-left",
           duration:4000
           });
        } else {
          alert(
          "未上传指定文件，将跳转到入网页面",
           this.$router.push("/xxx/xxx")
          );
        }
        // location.href="http://www.baidu.com"
        this.xxx();//表格接口
        document.getElementById("uploadEventFile").value = "";
      });
    },

---

纯前端的静态导入 

①创建一个js文件

export let networkPro = { //函数名称
  xxx1: {
    text: "xxx1",
    type: "string"
  },
  xxx2: {
    text: "xxx2",
    type: "string"
  },
  xxx3: {
    text: "xxx3",
    type: "string"
  },
}

export function readFile(file) {  //函数名称
  return new Promise(resolve => {
    let reader = new FileReader();
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result);
    }
  })
}

②下载xlsx插件，然后在mainjs文件里导入

npm install --save xlsx

import XLSX from 'xlsx'

Vue.prototype.XLSX = XLSX

③在vue页面里进行调用和封装

//结构层
  <el-upload
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
     action
    :on-change="uploadExcel"
    :show-file-list="false"
    :file-list="fileList"
     accept=".xlsx,.xls"
    :auto-upload="false">导入</el-upload>  

//引入 
import XLSX from "xlxs";
import { networkPro, fileReader } from "../../excel.js";

//导入
        async uploadExcel(ev){
          let file = ev.raw
          // console.log(file);
          if(!file) return ;

          this.show = false;

          //读取file数据（变为json格式）
          let data = await readFile(file)
          // console.log(data);
          let workbook = XLSX.read(data, {type:"binary"}),
            worksheet = workbook.Sheets[workbook.SheetNames[0]];
            data = XLSX.utils.sheet_to_json(worksheet);
          // console.log(workbook);
          // console.log(worksheet);
    console.log(data);
          //把读取出来的数据变为最后传递给服务器的数据
          let arr = [];
          data.forEach(item =>{
            let obj = {};
            for(let key in networkPro){
              if (!Object.hasOwnProperty.call(networkPro,"key")) break;
              let v =networkPro[key],
              text = v.text,
              type = v.type;
              v= item[text] || "";
              type === "string" ?(v= String(v)):null
              type === "number" ?(v= Number(v)):null
              obj[key] =v

            }
            arr.push(obj);
          })
          //展示到页面
          this.show = true;
          this.tableData = arr;
            console.log(this.tableData);
        },

---

作者上一篇文章，

【vue】echarts的tooltip（提示框）基础配置和样式改写_意初的博客-CSDN博客_echarts 提示框样式为了能够使得echarts的tooltip提示框触发的格式，使用valueFormatter回调函数，能按照自定义的格式 项目场景②：改写提示框里的样式echarts的tooltip的样式需要官网api属性，贴一下常用的 项目场景③：自定义提示框里的样式为了能够使得echarts的tooltip改写样式，就不得不提formatter函数作者上一篇文章，vue+echarts折线图拐点样式的配置和教程（简单易懂）_意初的博客-CSDN博客vue+echarts折.........https://blog.csdn.net/weixin_43928112/article/details/125523542?spm=1001.2014.3001.5501