devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue +elementui 导入CSV文件

作者：小丑西瓜9 | 2024-04-10 03:25:18

赞

踩

vue +elementui 导入CSV文件

 

目录

1. 安装依赖

2. 封装一个公共js方法，使用papaparse解析CSV文件且返回数组格式

3. html页面

4. 案例图

1. 安装依赖

cnpm i papaparse -s

cnpm i  jschardet -s

2. 封装一个公共js方法，使用papaparse解析CSV文件且返回数组格式

  1. import jschardet from 'jschardet'
  2. import Papa from 'papaparse'
  3.  
  4. /**
  5.  * csv file to 2D arr
  6.  * */
  7. // 检查编码，引用了 jschardet
  8. function checkEncoding(base64Str) {
  9.   // 这种方式得到的是一种二进制串
  10.   var str = atob(base64Str.split(';base64,')[1])
  11.   // console.log(str);
  12.   // 要用二进制格式
  13.   var encoding = jschardet.detect(str)
  14.   encoding = encoding.encoding
  15.   // console.log( encoding );
  16.   if (encoding === 'windows-1252') {	// 有时会识别错误（如UTF8的中文二字）
  17.     encoding = 'ANSI'
  18.   }
  19.   return encoding
  20. }
  21. function csv(file) {
  22.   return new Promise((resolve, reject) => {
  23.     // let file = this.$refs.csvData.files[0]
  24.     const fReader = new FileReader()
  25.     fReader.readAsDataURL(file)
  26.     fReader.onload = function (evt) {
  27.       const data = evt.target.result
  28.       // console.log( data );
  29.       const encoding = checkEncoding(data)
  30.       // console.log(encoding);
  31.       // 转换成二维数组，需要引入Papaparse.js
  32.       Papa.parse(file, {
  33.         encoding: encoding,
  34.         complete: function (results) {		// UTF8 \r\n与\n混用时有可能会出问题
  35.           // console.log(results)
  36.           const res = results.data
  37.           if (res[res.length - 1] === '') {	// 去除最后的空行
  38.             res.pop()
  39.           }
  40.           resolve(res)
  41.         }
  42.       })
  43.     }
  44.   })
  45. }
  46. export default {
  47.   csv
  48. }

3. html页面

ps: 里面有导入的一部分代码，不需要就删除即可。

  1. <template>
  2.   <div class="testIndex">
  3.     <el-row>
  4.       <el-col :span="12"> <el-button
  5.           @click="outBtn"
  6.           type="success"
  7.         >导出</el-button></el-col>
  8.       <el-col :span="12">
  9.         <el-upload
  10.           class="upload-demo"
  11.           action=""
  12.           :on-change="handleChange"
  13.           :file-list="fileListUpload"
  14.           accept=".csv"
  15.           :auto-upload="false"
  16.         >
  17.           <el-button
  18.             size="small"
  19.             type="primary"
  20.           >点击上传</el-button>
  21.         </el-upload>
  22.       </el-col>
  23.  
  24.     </el-row>
  25.  
  26.     <el-table
  27.       :data="tableData"
  28.       border
  29.       style="width: 50%"
  30.       :header-cell-style="{background:'#EEF6FD',color:'#251E25'}"
  31.       slot="empty"
  32.     >
  33.       <el-table-column
  34.         prop="number"
  35.         label="#"
  36.         width="50%"
  37.         align="center"
  38.       ></el-table-column>
  39.       <el-table-column
  40.         prop="name"
  41.         label="字段名"
  42.         align="center"
  43.       ></el-table-column>
  44.       <el-table-column
  45.         prop="nameRemark"
  46.         label="备注名"
  47.         align="center"
  48.       ></el-table-column>
  49.       <el-table-column
  50.         prop="index"
  51.         label="索引字段"
  52.         align="center"
  53.       ></el-table-column>
  54.     </el-table>
  55.  
  56.     <!-- 弹框 -->
  57.     <el-dialog
  58.       title="数据导出"
  59.       :visible.sync="dialogVisible1"
  60.       width="30%"
  61.     >
  62.       <el-form
  63.         :model="exportForm"
  64.         ref="exportForm"
  65.         label-position="right"
  66.       >
  67.         <el-form-item
  68.           label="导出格式"
  69.           prop="exportFormat"
  70.         >
  71.           <el-select
  72.             v-model="exportForm.exportFormat"
  73.             placeholder="请选择"
  74.           >
  75.             <el-option
  76.               label="CSV"
  77.               value="0"
  78.             ></el-option>
  79.             <el-option
  80.               label="XML"
  81.               value="1"
  82.             ></el-option>
  83.             <el-option
  84.               label="HTML"
  85.               value="2"
  86.             ></el-option>
  87.             <el-option
  88.               label="PDF"
  89.               value="3"
  90.             ></el-option>
  91.             <el-option
  92.               label="Excel"
  93.               value="4"
  94.             ></el-option>
  95.           </el-select>
  96.         </el-form-item>
  97.       </el-form>
  98.       <div
  99.         slot="footer"
  100.         class="dialog-footer"
  101.       >
  102.         <el-button @click="handleClose">取 消</el-button>
  103.         <el-button
  104.           type="primary"
  105.           @click="handleExprotData"
  106.         >确 定</el-button>
  107.       </div>
  108.     </el-dialog>
  109.   </div>
  110. </template>
  111. <script>
  112. import { exportCsv } from "@/utils/testUtils";
  113. import csv2arr from "@/assets/csv-arr";
  114. export default {
  115.   data() {
  116.     return {
  117.       dialogVisible1: false,
  118.       exportForm: {
  119.         id: "",
  120.         exportFormat: "",
  121.       },
  122.       tableData: [
  123.         // { id: 1, name: "XXX公司", test1: "测试11", test2: "测试22" },
  124.         // { id: 2, name: "sdfds", test1: "测试11-2", test2: "测试22-2" },
  125.         // { id: 3, name: "sff胜多负少", test1: "测试11-3", test2: "测试22-3" },
  126.         // { id: 4, name: "儿童", test1: "测试11-4", test2: "测试22-4" },
  127.       ],
  128.       fileTemp: null,
  129.       fileListUpload: [],
  130.       fileList: [],
  131.     };
  132.   },
  133.   methods: {
  134.     handleClose() {
  135.       this.dialogVisible1 = false;
  136.       this.exportForm = {
  137.         id: "",
  138.         exportFormat: "",
  139.       };
  140.     },
  141.     // 导出按钮，导出时触发弹窗
  142.     outBtn() {
  143.       this.dialogVisible1 = true;
  144.     },
  145.     //#region 导出功能
  146.     handleExprotData() {
  147.       //表头
  148.       let allColumns = [
  149.         { title: "名称", key: "name" },
  150.         { title: "测试1", key: "test1" },
  151.         { title: "测试2", key: "test2" },
  152.       ];
  153.       let checkboxList = [
  154.         { id: 1, name: "XXX公司", test1: "测试11", test2: "测试22" },
  155.         { id: 2, name: "sdfds", test1: "测试11-2", test2: "测试22-2" },
  156.         { id: 3, name: "sff胜多负少", test1: "测试11-3", test2: "测试22-3" },
  157.         { id: 4, name: "儿童", test1: "测试11-4", test2: "测试22-4" },
  158.       ];
  159.       //this.checkboxList是勾选的需要导出的数据
  160.       console.log("allColumns------", allColumns);
  161.       console.log("checkboxList----", checkboxList);
  162.       this.exportForm.exportFormat == 0 &&
  163.         exportCsv(allColumns, checkboxList, "测试Csv");
  164.     },
  165.     //#endregion
  166.  
  167.     //#region 导入
  168.     handleChange(file, fileList) {
  169.       this.fileTemp = file.raw;
  170.       if (this.fileTemp) {
  171.         if (
  172.           this.fileTemp.type == ".csv" ||
  173.           this.fileTemp.type == "application/vnd.ms-excel"
  174.         ) {
  175.           this.importcsv(file.raw);
  176.         } else {
  177.           this.$message({
  178.             type: "warning",
  179.             message: "附件格式错误，请删除后重新上传！",
  180.           });
  181.         }
  182.       } else {
  183.         this.$message({
  184.           type: "warning",
  185.           message: "请上传附件！",
  186.         });
  187.       }
  188.     },
  189.     importcsv(obj) {
  190.       let _this = this; //如果需要点击事件结束之后对DOM进行操作使用)_this.xx=xx进行操作
  191.       console.log("obj===", obj);
  192.       //
  193.       let data = [];
  194.       csv2arr.csv(obj).then((res) => {
  195.         console.log("我的数据", res);
  196.         //遍历csv文件中的数据，存放到data中 方法不唯一，可自己更改
  197.         for (let i = 0; i < res.length - 1; i++) {
  198.           let obj = {};
  199.           obj.number = res[i][0];
  200.           obj.name = res[i][1];
  201.           obj.nameRemark = res[i][2];
  202.           obj.index = res[i][3];
  203.           data.push(obj);
  204.         }
  205.         console.log("截取第一位之前的数据==", data);
  206.         data.splice(0, 1); //将数组第一位的表格名称去除
  207.         let num = 0;
  208.         console.log("2024-4-1data==", data);
  209.         _this.tableData = data; //将数据放入要展示的表格中
  210.       });
  211.     },
  212.  
  213.     //#endregion
  214.     // csv() {
  215.     //   csv2arr.csv(this.$refs.csvData.files[0]).then((res)=>{
  216.     //         console.log('我的数据', res)
  217.     //   })
  218.     // }
  219.   },
  220. };
  221. </script>

4. 案例图

 ps:目前这个只适用于CSV文件

案例成果
csv文件
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读