vue +elementui 導入CSV文件的方式

更新時間：2024年04月09日 11:55:47 作者：樂~~~

封裝一個公共js方法,使用papaparse解析CSV文件且返回數(shù)組格式,下面通過示例代碼介紹vue +elementui 導入CSV文件的方式,感興趣的朋友一起看看吧

1. 安裝依賴

cnpm i papaparse -s

cnpm i jschardet -s

2. 封裝一個公共js方法，使用papaparse解析CSV文件且返回數(shù)組格式

import jschardet from 'jschardet'
import Papa from 'papaparse'
/**
 * csv file to 2D arr
 * */
// 檢查編碼，引用了 jschardet
function checkEncoding(base64Str) {
  // 這種方式得到的是一種二進制串
  var str = atob(base64Str.split(';base64,')[1])
  // console.log(str);
  // 要用二進制格式
  var encoding = jschardet.detect(str)
  encoding = encoding.encoding
  // console.log( encoding );
  if (encoding === 'windows-1252') {	// 有時會識別錯誤（如UTF8的中文二字）
    encoding = 'ANSI'
  }
  return encoding
}
function csv(file) {
  return new Promise((resolve, reject) => {
    // let file = this.$refs.csvData.files[0]
    const fReader = new FileReader()
    fReader.readAsDataURL(file)
    fReader.onload = function (evt) {
      const data = evt.target.result
      // console.log( data );
      const encoding = checkEncoding(data)
      // console.log(encoding);
      // 轉(zhuǎn)換成二維數(shù)組，需要引入Papaparse.js
      Papa.parse(file, {
        encoding: encoding,
        complete: function (results) {		// UTF8 \r\n與\n混用時有可能會出問題
          // console.log(results)
          const res = results.data
          if (res[res.length - 1] === '') {	// 去除最后的空行
            res.pop()
          }
          resolve(res)
        }
      })
    }
  })
}
export default {
  csv
}

3. html頁面

ps: 里面有導入的一部分代碼，不需要就刪除即可。

<template>
  <div class="testIndex">
    <el-row>
      <el-col :span="12"> <el-button
          @click="outBtn"
          type="success"
        >導出</el-button></el-col>
      <el-col :span="12">
        <el-upload
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :file-list="fileListUpload"
          accept=".csv"
          :auto-upload="false"
        >
          <el-button
            size="small"
            type="primary"
          >點擊上傳</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 50%"
      :header-cell-style="{background:'#EEF6FD',color:'#251E25'}"
      slot="empty"
    >
      <el-table-column
        prop="number"
        label="#"
        width="50%"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="字段名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="nameRemark"
        label="備注名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="index"
        label="索引字段"
        align="center"
      ></el-table-column>
    </el-table>
    <!-- 彈框 -->
    <el-dialog
      title="數(shù)據(jù)導出"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form
        :model="exportForm"
        ref="exportForm"
        label-position="right"
      >
        <el-form-item
          label="導出格式"
          prop="exportFormat"
        >
          <el-select
            v-model="exportForm.exportFormat"
            placeholder="請選擇"
          >
            <el-option
              label="CSV"
              value="0"
            ></el-option>
            <el-option
              label="XML"
              value="1"
            ></el-option>
            <el-option
              label="HTML"
              value="2"
            ></el-option>
            <el-option
              label="PDF"
              value="3"
            ></el-option>
            <el-option
              label="Excel"
              value="4"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="handleExprotData"
        >確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { exportCsv } from "@/utils/testUtils";
import csv2arr from "@/assets/csv-arr";
export default {
  data() {
    return {
      dialogVisible1: false,
      exportForm: {
        id: "",
        exportFormat: "",
      },
      tableData: [
        // { id: 1, name: "XXX公司", test1: "測試11", test2: "測試22" },
        // { id: 2, name: "sdfds", test1: "測試11-2", test2: "測試22-2" },
        // { id: 3, name: "sff勝多負少", test1: "測試11-3", test2: "測試22-3" },
        // { id: 4, name: "兒童", test1: "測試11-4", test2: "測試22-4" },
      ],
      fileTemp: null,
      fileListUpload: [],
      fileList: [],
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible1 = false;
      this.exportForm = {
        id: "",
        exportFormat: "",
      };
    },
    // 導出按鈕，導出時觸發(fā)彈窗
    outBtn() {
      this.dialogVisible1 = true;
    },
    //#region 導出功能
    handleExprotData() {
      //表頭
      let allColumns = [
        { title: "名稱", key: "name" },
        { title: "測試1", key: "test1" },
        { title: "測試2", key: "test2" },
      ];
      let checkboxList = [
        { id: 1, name: "XXX公司", test1: "測試11", test2: "測試22" },
        { id: 2, name: "sdfds", test1: "測試11-2", test2: "測試22-2" },
        { id: 3, name: "sff勝多負少", test1: "測試11-3", test2: "測試22-3" },
        { id: 4, name: "兒童", test1: "測試11-4", test2: "測試22-4" },
      ];
      //this.checkboxList是勾選的需要導出的數(shù)據(jù)
      console.log("allColumns------", allColumns);
      console.log("checkboxList----", checkboxList);
      this.exportForm.exportFormat == 0 &&
        exportCsv(allColumns, checkboxList, "測試Csv");
    },
    //#endregion
    //#region 導入
    handleChange(file, fileList) {
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type == ".csv" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importcsv(file.raw);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式錯誤，請刪除后重新上傳！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "請上傳附件！",
        });
      }
    },
    importcsv(obj) {
      let _this = this; //如果需要點擊事件結(jié)束之后對DOM進行操作使用)_this.xx=xx進行操作
      console.log("obj===", obj);
      //
      let data = [];
      csv2arr.csv(obj).then((res) => {
        console.log("我的數(shù)據(jù)", res);
        //遍歷csv文件中的數(shù)據(jù)，存放到data中 方法不唯一，可自己更改
        for (let i = 0; i < res.length - 1; i++) {
          let obj = {};
          obj.number = res[i][0];
          obj.name = res[i][1];
          obj.nameRemark = res[i][2];
          obj.index = res[i][3];
          data.push(obj);
        }
        console.log("截取第一位之前的數(shù)據(jù)==", data);
        data.splice(0, 1); //將數(shù)組第一位的表格名稱去除
        let num = 0;
        console.log("2024-4-1data==", data);
        _this.tableData = data; //將數(shù)據(jù)放入要展示的表格中
      });
    },
    //#endregion
    // csv() {
    //   csv2arr.csv(this.$refs.csvData.files[0]).then((res)=>{
    //         console.log('我的數(shù)據(jù)', res)
    //   })
    // }
  },
};
</script>