若依配置教程（七）Excel预览功能实现

心已赠人 2024-03-27 10:44 140阅读 0赞

### 实现效果及源码 ###

实现效果如下图所示：  
![在这里插入图片描述][5ef3dfb247f2432493f452a61129bb5c.png_pic_center]**实现思路：**  
1.动态表格：定义表头数组，表格遍历表头生成表格列  
2.读取excel文件内容，封装表头，绑定表格数据

### 代码修改 ###

首先参考[若依官网][Link 1]，先实现[excel导入功能][excel]，然后在源码的基础上进行修改。  
网址：http://doc.ruoyi.vip/ruoyi-vue/document/htsc.html\#%E5%AF%BC%E5%87%BA%E5%AE%9E%E7%8E%B0%E6%B5%81%E7%A8%8B  
如图所示：  
![在这里插入图片描述][c5fc8ea4956c4ba086ec390953e0752d.png_pic_center]  
在有了导入功能的基础上，我们开始对代码进行修改：

### 一、替换第三段代码，上传组件 ###

![在这里插入图片描述][7a5fd11f5d3f4f18860c9d91ee16fe29.png_pic_center]  
将这段代码注销，然后这个位置下面加入代码：

<el-dialog :title="upload.title" :visible.sync="upload.open" width="800px" append-to-body>
          <el-upload
            name="file"
            ref="upload"
            :limit="1"
            :file-list="fileList"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-change="handleChange"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">
              仅允许导入xls、xlsx格式文件。
              <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
            </div>
          </el-upload>
    
          <el-row class="mb8"><h4>预览</h4> </el-row>
          <el-table :data="tableData" border>
            <el-table-column
              v-for="(items, index) in tableCol"
              :prop="items.colProp"
              :label="items.colLable"
              width="180"
              :key="index"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
    
        </el-dialog>

动态表格（上面那段代码已包含，这是预览功能实现的关键代码）：

<el-table :data="tableData" border>
            <el-table-column
              v-for="items in tableCol"
              :prop="items.colProp"
              :label="items.colLable"
              width="180"
              :key="items.colLable"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>

### 二、读取excel文件方法 ###

//选取文件
        async handleChange(file, fileList) {
        
          this.loading = true
          let _this = this
          let reader = new FileReader()
          reader.onload = function (e) {
        
            let data = e.target.result
            this.wb = XLSX.read(data, {
        
              type: 'binary',
              cellDates: true,
            })
            console.log(this.wb.Sheets[this.wb.SheetNames[0]])
            /**
             * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
             * wb.Sheets[Sheet名]获取第一个Sheet的数据
             */
            let excelJson = XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]], {
        
              defval: null,
              raw: false
            })
            console.log(excelJson)
            //表头
            for (var item in excelJson[0]) {
        
              _this.tableCol.push({
        
                colProp: item,
                colLable: item,
              })
            }
            excelJson.forEach((element) => {
        
              element['日期'] = formatDate(element['日期'])
              element['预计开始时间'] = formatDate(element['预计开始时间'])
              element['预计结束时间'] = formatDate(element['预计结束时间'])
              element['实际开始时间'] = formatDate(element['实际开始时间'])
              element['实际结束时间'] = formatDate(element['实际结束时间'])
            })
            _this.tableData = excelJson
            _this.loading = false
          }
          reader.readAsBinaryString(file.raw)
        },

将这段代码加入到文件夹最后即可

### 三、在data（）中定义数组 ###

在下图所示的代码中，新加入这三个数组：  
fileList:\[\],  
tableData:\[\],  
tableCol:\[\],  
![在这里插入图片描述][11a866161d6b403da2424993273abd3f.png_pic_center]

### 四、在index.vue的< script >中引入 ###

import {
        formatDate} from "@/utils";
    import * as XLSX from "xlsx";

--------------------

![在这里插入图片描述][ac90b41fa955448d9eca576c410d8cf7.png_pic_center]

保存之后，即可加载成功！  
本文参考：https://blog.csdn.net/qq\_27250279/article/details/126156199

[5ef3dfb247f2432493f452a61129bb5c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e3b7c21d588a43578d5efc4b2c746ef3.png
[Link 1]: http://doc.ruoyi.vip/ruoyi-vue/document/htsc.html#%E5%AF%BC%E5%87%BA%E5%AE%9E%E7%8E%B0%E6%B5%81%E7%A8%8B
[excel]: https://blog.csdn.net/qq_46073825/article/details/128827002?spm=1001.2014.3001.5501
[c5fc8ea4956c4ba086ec390953e0752d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/eaf798758ec7463fa685bece3e04956a.png
[7a5fd11f5d3f4f18860c9d91ee16fe29.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8ff9f4c909d2482c8bb690075a0359bd.png
[11a866161d6b403da2424993273abd3f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/9389a85318c4481e8e8ea28eb50303c3.png
[ac90b41fa955448d9eca576c410d8cf7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/64cb54058f2e48aeb8b3b6482cb6d2db.png