• vue中或者react中的excel导入和导出

    excel导入和导出是后台管理系统常见的功能。

           当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便。

            在用户使用信息化系统时，也需要把网页表格里的数据导出到excel里，方便进行打印，排版等等。

    一、安装依赖的模块：

    1、file-saver 用于文件操作

    2、xlsx用于excel文件处

    npm i xlsx@0.17.0 -S

npm i file-saver@2.0.5 -S

    二、导出功能实现

    在自己的项目中新建一个js文件模块。放入如下代码：

    1、使用dom元素导出
    1. // 1、根据dom元素导出成excel文件：
    2.  
    3. // 自动分析dom元素导出excel
    4. // 参数：
    5. // table：表格的dom元素对象
    6. // filename：导出的文件名（不用写扩展名）
    7. export function excelExport(table, filename) {
    8.     // workbook,
    9.     const wb = XLSX.utils.table_to_book(table);
    10.     console.log("wb", wb);
    11.  
    12.     /* Export to file (start a download) */
    13.     const defaultCellStyle = {
    14.         font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    15.         fill: { fgColor: { rgb: 'FFFFAA00' } },
    16.     }
    17.     const wopts = {
    18.         bookType: 'xlsx',
    19.         bookSST: false,
    20.         type: 'binary',
    21.         cellStyle: true,
    22.         defaultCellStyle: defaultCellStyle,
    23.         showGridLines: false,
    24.     }
    25.     const wbout = XLSX.write(wb, wopts)
    26.     const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    27.     saveAs(blob, filename + '.xlsx')
    28. }
    29.  
    30. function s2ab(s) {
    31.     console.log("s", s);
    32.     var buf = new ArrayBuffer(s.length);
    33.     var view = new Uint8Array(buf);
    34.     for (var i = 0; i != s.length; ++i) {
    35.         view[i] = s.charCodeAt(i) & 0xFF;
    36.     }
    37.     return buf;
    38. }

    调用示例：

    excelExport(document.getElementById("t2"), "student");// t2是一个table标签的id。其实是包含表格标签的id，会自动分析的。
    2、使用json数组数据导出
    1.  
    2. // 2、根据json数据（数组）导出成excel文件：
    3.  
    4. // 参数：
    5. // data：json数组
    6. // headers：excel的表头
    7. // filename：导出的文件名（不用写扩展名）
    8. export function excelExportUseJson(data, headers, filename) {
    9.     // 使用深克隆不影响原table数据的展示
    10.     const json = cloneDeep(data)
    11.  
    12.     json.forEach(item => {
    13.         for (let key in item) {
    14.             if (headers.hasOwnProperty(key)) {
    15.                 item[headers[key]] = item[key]
    16.             }
    17.             delete item[key]
    18.         }
    19.     })
    20.  
    21.     // excel 对象
    22.     const wb = XLSX.utils.book_new()
    23.  
    24.     // 创建sheet
    25.     const ws = XLSX.utils.json_to_sheet(json, { header: Object.values(headers) })
    26.     // excel 添加sheet名称
    27.     wb.SheetNames.push(filename)
    28.     // excel 添加sheet
    29.     wb.Sheets[filename] = ws
    30.  
    31.     const defaultCellStyle = {
    32.         font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    33.         fill: { fgColor: { rgb: 'FFFFAA00' } },
    34.     }
    35.     const wopts = {
    36.         bookType: 'xlsx',
    37.         bookSST: false,
    38.         type: 'binary',
    39.         cellStyle: true,
    40.         defaultCellStyle: defaultCellStyle,
    41.         showGridLines: false,
    42.     }
    43.     const wbout = XLSX.write(wb, wopts)
    44.     const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    45.     saveAs(blob, filename + '.xlsx')
    46. }
    47.  
    48.  
    49. function cloneDeep(obj) {
    50.     if (typeof obj !== 'object' || obj === null) {
    51.         return obj;
    52.     }
    53.  
    54.     let clonedObj = Array.isArray(obj) ? [] : {};
    55.  
    56.     for (let key in obj) {
    57.         if (obj.hasOwnProperty(key)) {
    58.             clonedObj[key] = cloneDeep(obj[key]);
    59.         }
    60.     }
    61.  
    62.     return clonedObj;
    63. }

    调用示例：
     

    1. 调用示例：
    2.  
    3. const books = [
    4.  
    5. ​    {
    6.  
    7. ​      id:"878911",
    8.  
    9. ​      name:"三国演义"
    10.  
    11. ​    },     
    12.  
    13. ​    {
    14.  
    15. ​      id:"878912",
    16.  
    17. ​      name:"西游记"
    18.  
    19. ​    }
    20.  
    21. ]
    22.  
    23. excelExportUseJson(books,{id:"编号",name:"书名"},"student02");

    三、导入功能实现

    1.  
    2. // 1、导入成dom元素：
    3.  
    4. // 参数：
    5. // data：文件对象（用<input type=file /> 选择到file对象
    6. // domId：导入的excel显示的容器
    7.  
    8. export function httpRequestToHTML(data, domId) {
    9.  
    10.     const file = data
    11.     const types = file.name.split('.')[1]
    12.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    13.         (item) => item === types
    14.     )
    15.     if (!fileType) {
    16.         this.$message.error('格式错误！请重新选择')
    17.         return
    18.     }
    19.  
    20.  
    21.     const reader = new FileReader()
    22.     reader.readAsArrayBuffer(file, 'utf-8');
    23.     return new Promise(function (resolve, reject) {
    24.  
    25.         reader.onloadend = function (e) {
    26.             const data = e.target.result
    27.             console.log('data', data)
    28.             const wb = XLSX.read(data, {
    29.                 type: 'buffer'
    30.             })
    31.  
    32.             const ws = wb.Sheets[wb.SheetNames[0]]
    33.             console.log('ws', ws)
    34.  
    35.             const htmlStr = XLSX.utils.sheet_to_html(ws)
    36.             resolve(htmlStr); 
    37.  
    38.         }
    39.  
    40.     });
    41. }
    42.  
    43.  
    44. // 2、导入成json数据。
    45. // 参数：
    46. // data：文件对象（用<input type=file /> 选择到file对象
    47.  
    48. export function httpRequestToJSON(data) {
    49.  
    50.     const file = data
    51.     const types = file.name.split('.')[1]
    52.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    53.         (item) => item === types
    54.     )
    55.     if (!fileType) {
    56.         this.$message.error('格式错误！请重新选择')
    57.         return
    58.     }
    59.  
    60.  
    61.     const reader = new FileReader()
    62.     reader.readAsArrayBuffer(file, 'utf-8');
    63.  
    64.     return new Promise(function (resolve, reject) {
    65.  
    66.         reader.onloadend = function (e) {
    67.             const data = e.target.result
    68.             console.log('data', data)
    69.             const wb = XLSX.read(data, {
    70.                 type: 'buffer'
    71.             })
    72.  
    73.             const ws = wb.Sheets[wb.SheetNames[0]]
    74.             
    75.             let arr = XLSX.utils.sheet_to_json(ws);
    76.  
    77.             resolve(arr);
    78.         }
    79.         
    80.     });
    81. }
    82.  
    83.  
    84. // 封装：把excel转成html或者json。
    85. // 参数：
    86. //    file:(excel)文件对象
    87. //    outtype:是导出的类型(取值：html，json)
    88.  
    89. // 调用示例：
    90. // excelTo(文件对象，"html")
    91. // excelTo(文件对象，"json")
    92. export function excelImport(file,outtype="json") {
    93.  
    94.     const types = file.name.split('.')[1]
    95.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    96.         (item) => item === types
    97.     )
    98.     if (!fileType) {
    99.         this.$message.error('格式错误！请重新选择')
    100.         return
    101.     }
    102.  
    103.     const reader = new FileReader()
    104.     reader.readAsArrayBuffer(file, 'utf-8');
    105.  
    106.     return new Promise(function (resolve, reject) {
    107.  
    108.         reader.onloadend = function (e) {
    109.             const data = e.target.result
    110.             console.log('data', data)
    111.             const wb = XLSX.read(data, {
    112.                 type: 'buffer'
    113.             })
    114.  
    115.             const ws = wb.Sheets[wb.SheetNames[0]];
    116.             let result = "";
    117.             switch(outtype.toLocaleLowerCase()){
    118.                 case "html":result = XLSX.utils.sheet_to_html(ws);break;
    119.                 case "json":result = XLSX.utils.sheet_to_json(ws);break;
    120.                 default:this.$message.error('输出类型错误，只能取值为 html或者json')
    121.             }
    122.             resolve(result);
    123.         }
    124.     });
    125. }

    调用示例：

    1. const importFn=(e)=>{
    2.     if(e.target.files && e.target.files.length>0){
    3.         httpRequestToHTML(e.target.files[0],"TableContainer")
    4.     }
    5. }
    6.  
    7.  
    8. <input type="file" onChange={importFn} />
    9. <div id="TableContainer">
    10.  
    11. </div>

    四、如果想看完整代码的，在下面：

    1、导入导出的工具库：excelUtils.js
    1. // 此工具库是：excel的导入和导出
    2.  
    3. import * as XLSX from 'xlsx';
    4. // import * as fs from 'file-saver';
    5. import { saveAs } from "file-saver"
    6.  
    7. // 一、excel的导出：
    8. // 1、根据dom元素导出成excel文件：
    9.  
    10. // 自动分析dom元素导出excel
    11. // 参数：
    12. // table：表格的dom元素对象
    13. // filename：导出的文件名（不用写扩展名）
    14. export function excelExport(table, filename) {
    15.     // workbook,
    16.     const wb = XLSX.utils.table_to_book(table);
    17.     console.log("wb", wb);
    18.  
    19.     /* Export to file (start a download) */
    20.     const defaultCellStyle = {
    21.         font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    22.         fill: { fgColor: { rgb: 'FFFFAA00' } },
    23.     }
    24.     const wopts = {
    25.         bookType: 'xlsx',
    26.         bookSST: false,
    27.         type: 'binary',
    28.         cellStyle: true,
    29.         defaultCellStyle: defaultCellStyle,
    30.         showGridLines: false,
    31.     }
    32.     const wbout = XLSX.write(wb, wopts)
    33.     const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    34.     saveAs(blob, filename + '.xlsx')
    35. }
    36.  
    37. function s2ab(s) {
    38.     console.log("s", s);
    39.     var buf = new ArrayBuffer(s.length);
    40.     var view = new Uint8Array(buf);
    41.     for (var i = 0; i != s.length; ++i) {
    42.         view[i] = s.charCodeAt(i) & 0xFF;
    43.     }
    44.     return buf;
    45. }
    46.  
    47. // 2、根据json数据（数组）导出成excel文件：
    48.  
    49. // 参数：
    50. // data：json数组
    51. // headers：excel的表头
    52. // filename：导出的文件名（不用写扩展名）
    53. export function excelExportUseJson(data, headers, filename) {
    54.     // 使用深克隆不影响原table数据的展示
    55.     const json = cloneDeep(data)
    56.  
    57.     json.forEach(item => {
    58.         for (let key in item) {
    59.             if (headers.hasOwnProperty(key)) {
    60.                 item[headers[key]] = item[key]
    61.             }
    62.             delete item[key]
    63.         }
    64.     })
    65.  
    66.     // excel 对象
    67.     const wb = XLSX.utils.book_new()
    68.  
    69.     // 创建sheet
    70.     const ws = XLSX.utils.json_to_sheet(json, { header: Object.values(headers) })
    71.     // excel 添加sheet名称
    72.     wb.SheetNames.push(filename)
    73.     // excel 添加sheet
    74.     wb.Sheets[filename] = ws
    75.  
    76.     const defaultCellStyle = {
    77.         font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    78.         fill: { fgColor: { rgb: 'FFFFAA00' } },
    79.     }
    80.     const wopts = {
    81.         bookType: 'xlsx',
    82.         bookSST: false,
    83.         type: 'binary',
    84.         cellStyle: true,
    85.         defaultCellStyle: defaultCellStyle,
    86.         showGridLines: false,
    87.     }
    88.     const wbout = XLSX.write(wb, wopts)
    89.     const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    90.     saveAs(blob, filename + '.xlsx')
    91. }
    92.  
    93.  
    94. function cloneDeep(obj) {
    95.     if (typeof obj !== 'object' || obj === null) {
    96.         return obj;
    97.     }
    98.  
    99.     let clonedObj = Array.isArray(obj) ? [] : {};
    100.  
    101.     for (let key in obj) {
    102.         if (obj.hasOwnProperty(key)) {
    103.             clonedObj[key] = cloneDeep(obj[key]);
    104.         }
    105.     }
    106.  
    107.     return clonedObj;
    108. }
    109.  
    110. // 二、从excel文件导入到项目里。
    111.  
    112. // 1、导入成dom元素：
    113.  
    114. // 参数：
    115. // data：文件对象（用<input type=file /> 选择到file对象
    116. // domId：导入的excel显示的容器
    117.  
    118. export function httpRequestToHTML(data, domId) {
    119.  
    120.     const file = data
    121.     const types = file.name.split('.')[1]
    122.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    123.         (item) => item === types
    124.     )
    125.     if (!fileType) {
    126.         this.$message.error('格式错误！请重新选择')
    127.         return
    128.     }
    129.  
    130.  
    131.     const reader = new FileReader()
    132.     reader.readAsArrayBuffer(file, 'utf-8');
    133.     return new Promise(function (resolve, reject) {
    134.  
    135.         reader.onloadend = function (e) {
    136.             const data = e.target.result
    137.             console.log('data', data)
    138.             const wb = XLSX.read(data, {
    139.                 type: 'buffer'
    140.             })
    141.  
    142.             const ws = wb.Sheets[wb.SheetNames[0]]
    143.             console.log('ws', ws)
    144.  
    145.             const htmlStr = XLSX.utils.sheet_to_html(ws)
    146.             resolve(htmlStr); 
    147.  
    148.         }
    149.  
    150.     });
    151. }
    152.  
    153.  
    154. // 2、导入成json数据。
    155. // 参数：
    156. // data：文件对象（用<input type=file /> 选择到file对象
    157.  
    158. export function httpRequestToJSON(data) {
    159.  
    160.     const file = data
    161.     const types = file.name.split('.')[1]
    162.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    163.         (item) => item === types
    164.     )
    165.     if (!fileType) {
    166.         this.$message.error('格式错误！请重新选择')
    167.         return
    168.     }
    169.  
    170.  
    171.     const reader = new FileReader()
    172.     reader.readAsArrayBuffer(file, 'utf-8');
    173.  
    174.     return new Promise(function (resolve, reject) {
    175.  
    176.         reader.onloadend = function (e) {
    177.             const data = e.target.result
    178.             console.log('data', data)
    179.             const wb = XLSX.read(data, {
    180.                 type: 'buffer'
    181.             })
    182.  
    183.             const ws = wb.Sheets[wb.SheetNames[0]]
    184.             
    185.             let arr = XLSX.utils.sheet_to_json(ws);
    186.  
    187.             resolve(arr);
    188.         }
    189.         
    190.     });
    191. }
    192.  
    193.  
    194. // 封装：把excel转成html或者json。
    195. // 参数：
    196. //    file:(excel)文件对象
    197. //    outtype:是导出的类型(取值：html，json)
    198.  
    199. // 调用示例：
    200. // excelTo(文件对象，"html")
    201. // excelTo(文件对象，"json")
    202. export function excelImport(file,outtype="json") {
    203.  
    204.     const types = file.name.split('.')[1]
    205.     const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt'].some(
    206.         (item) => item === types
    207.     )
    208.     if (!fileType) {
    209.         this.$message.error('格式错误！请重新选择')
    210.         return
    211.     }
    212.  
    213.     const reader = new FileReader()
    214.     reader.readAsArrayBuffer(file, 'utf-8');
    215.  
    216.     return new Promise(function (resolve, reject) {
    217.  
    218.         reader.onloadend = function (e) {
    219.             const data = e.target.result
    220.             console.log('data', data)
    221.             const wb = XLSX.read(data, {
    222.                 type: 'buffer'
    223.             })
    224.  
    225.             const ws = wb.Sheets[wb.SheetNames[0]];
    226.             let result = "";
    227.             switch(outtype.toLocaleLowerCase()){
    228.                 case "html":result = XLSX.utils.sheet_to_html(ws);break;
    229.                 case "json":result = XLSX.utils.sheet_to_json(ws);break;
    230.                 default:this.$message.error('输出类型错误，只能取值为 html或者json')
    231.             }
    232.             resolve(result);
    233.         }
    234.     });
    235. }
    2、组件代码：
    1. <template>
    2.     <el-button @click="drawer = true" v-if="crud.charAt(0) === '1'">添加轮播图</el-button>
    3.     <el-button @click="toExcel01">excel导出(用dom元素)</el-button>
    4.     <el-button @click="toExcel02">excel导出(用json数组)</el-button>
    5.      <!-- <el-button @click="fromExcel">excel导入</el-button> -->
    6.     <!-- <input type="file" @change="fromExcel" /> -->
    7.     <el-upload ref="upload" class="upload-demo" :limit="1" :on-change="changeFn" :on-exceed="handleExceed" :auto-upload="false" :show-file-list="false">
    8.         <template #trigger>
    9.             <el-button type="primary">excel导入</el-button>
    10.         </template>
    11.     </el-upload>
    12.     <el-button @click="batchSave">批量提交</el-button>
    13.     <el-button @click="clearAll">清空轮播图数据</el-button>
    14.     <el-divider />
    15.  
    16.     <el-table ref="table" id="table01" :data="bannerList" height="600px" style="width: 100%">
    17.         <el-table-column prop="bannerid" label="编号" width="180" />
    18.         <el-table-column label="图片" width="180">
    19.             <template #default="scope">
    20.                 <img class="img" :src="scope.row.img" />
    21.             </template>
    22.         </el-table-column>
    23.         <el-table-column label="是否启用" v-if="crud.charAt(2) === '1'">
    24.             <template #default="scope">
    25.                 <el-switch v-model="scope.row.flag" />
    26.             </template>
    27.         </el-table-column>
    28.         <el-table-column label="跳转连接">
    29.             <template #default="scope">
    30.                 <el-link :href="scope.row.link" type="primary" target="_blank">跳转连接</el-link>
    31.             </template>
    32.         </el-table-column>
    33.         <el-table-column prop="alt" label="图片提示" />
    34.         <el-table-column label="操作" v-if="crud.charAt(2) === '1' || crud.charAt(3) === '1'">
    35.             <template #default="scope">
    36.                 <el-button type="danger" v-if="crud.charAt(3) === '1'" >删除</el-button>
    37.                 <el-button type="danger" v-if="crud.charAt(2) === '1'">修改</el-button>
    38.             </template>
    39.         </el-table-column>
    40.     </el-table>
    41.     <el-drawer v-model="drawer" title="添加轮播图" direction="rtl" :before-close="handleClose">
    42.         <AddBannerVue ref="addBannerRef" @ok="okHandle" @cancel="closeDrawer"></AddBannerVue>
    43.     </el-drawer>
    44.     <hr />
    45.     <div id="container"></div>
    46. </template>
    47.   
    48. <script lang="ts" setup>
    49. import { useRoute } from "vue-router";
    50. import { getBannerApi, addBannerApi,clearBannerApi } from "@/api/banner";
    51. import { onMounted, reactive, ref } from "vue";
    52. import { ElMessageBox } from 'element-plus'
    53. import type { UploadInstance, UploadProps, UploadRawFile,UploadFile } from 'element-plus'
    54. import AddBannerVue from "./AddBanner.vue";
    55. import type { IBanner } from "@/myTypes"
    56. import { excelExport, excelExportUseJson, excelImport } from "@/utils/excelUtils";
    57.  
    58. const $route = useRoute();//this.$route
    59.  
    60. const crud: string = $route.meta.crud as string;
    61.  
    62.  
    63. const bannerList = reactive<Array<IBanner>>([]);
    65. // 清空轮播图
    66.  
    67. const clearAll=()=>{
    68.     clearBannerApi().then(res=>{
    69.         if(res.data.code==="200"){
    70.             ElMessageBox.alert("清空成功", "提示", {
    71.                 confirmButtonText: "确定",
    72.                 callback: () => {
    73.                     getBannerList();
    74.                 }
    75.             });
    76.         }
    77.     }).catch(err=>{
    78.         console.log("清空失败",err);
    79.     })
    80. }
    81.  
    82. // 获取轮播图的数据
    83. function getBannerList() {
    84.     getBannerApi().then(res => {
    85.         if (res.data.code === "200") {
    86.             bannerList.length = 0;
    87.             bannerList.push(...res.data.data);
    88.         }
    89.     }).catch(err => {
    90.         console.log("获取轮播图失败，err", err);
    91.     })
    92. }
    93.  
    94. // 在初次渲染完毕后，获取轮播图数据
    95. // onMounted(()=>getBannerList());
    96. getBannerList();
    97.  
    98.  
    99. // 添加相关：
    100. // 
    101. const drawer = ref(false);
    102.  
    103. function okHandle() {
    104.     closeDrawer();
    105.     getBannerList();
    106. }
    107.  
    108. // 关闭抽屉
    109. const closeDrawer = () => {
    110.     drawer.value = false;
    111. }
    112.  
    113. const addBannerRef = ref();
    114.  
    115. const handleClose = (done: () => void) => {
    116.     ElMessageBox.confirm('亲，您真的要关闭吗？')
    117.         .then(() => {
    118.             console.log("点了确定");
    119.             addBannerRef.value.clearData();
    120.             done();
    121.         })
    122.         .catch(() => {
    123.             // catch error
    124.             console.log("点了取消");
    125.         })
    126. }
    127.  
    128. onMounted(() => console.log("父组件：mounted"))
    129.  
    130. const toExcel01 = () => {
    131.     excelExport(document.getElementById("table01"), "banners");
    132. }
    133.  
    134. const toExcel02 = () => {
    135.     // const arr = bannerList.map(item => ({
    136.     //     bannerid: item.bannerid,
    137.     //     img: item.img,
    138.     //     flag: item.flag ? "是" : "否"
    139.     // }))
    140.     // excelExportUseJson(arr, {
    141.     //     bannerid: "编号",
    142.     //     img: "图片",
    143.     //     flag: "是否启用"
    144.     // }, "bannerList");
    145.  
    146.     excelExportUseJson(bannerList, {
    147.         bannerid: "编号",
    148.         img: "图片",
    149.         flag: "是否启用",
    150.         link: "跳转连接",
    151.         alt: "图片提示"
    152.     }, "bannerList");
    153. }
    154.  
    155. // 从excel文件中导入
    156. const fromExcel = (e: any) => {
    157.  
    158.     if (e.target.files && e.target.files.length > 0) {
    159.         excelImport(e.target.files[0],)
    160.             .then((arr: any) => {
    161.                 bannerList.length = 0;
    162.                 arr.forEach((item: any) => {
    163.                     bannerList.push({
    164.                         bannerid: item["编号"],
    165.                         img: item["图片"],
    166.                         flag: item["是否启用"],
    167.                         link: item["跳转连接"],
    168.                         alt: item["图片提示"]
    169.                     });
    170.                 })
    171.             })
    172.     }
    173. }
    174.  
    175. function batchSave() {
    176.     let count = 0;
    177.     bannerList.forEach((item: any) => {
    178.         addBannerApi(item).then(() => {
    179.             console.log(`添加成功了${++count}条`);
    180.         })
    181.     })
    182. }
    183.  
    184.  
    185. const upload = ref<UploadInstance>();
    186.  
    187. const handleExceed: UploadProps['onExceed'] = (files) => {
    188.  
    189.     upload.value!.clearFiles()
    190.  
    191.     const file = files[0] as UploadRawFile
    192.  
    193.     upload.value!.handleStart(file);
    194. }
    195.  
    196. const changeFn=(file:UploadFile)=>{
    197.     console.log("excelImport:file",file);
    198.  
    199.     excelImport(file.raw as File)
    200.         .then((arr: any) => {
    201.             bannerList.length = 0;
    202.             arr.forEach((item: any) => {
    203.                 bannerList.push({
    204.                     bannerid: item["编号"],
    205.                     img: item["图片"],
    206.                     flag: item["是否启用"],
    207.                     link: item["跳转连接"],
    208.                     alt: item["图片提示"]
    209.                 });
    210.             })
    211.         })
    212.  
    213. }
    214.  
    215. </script>
    216.  
    217. <style lang="scss" scoped>
    218. .img {
    219.     width: 100%;
    220.     height: 100px;
    221. }
    222. </style>

  • 相关阅读:
    vue之搭建脚手架快速创建vue项目
    JAVAEE框架技术之14SSM综合案例
    腾讯云部署----DevOps
    网络安全检测与防范 测试题（二）
    FPGA原理与结构（13）——FIFO IP核的使用与测试
    Java on VS Code 8月更新｜Spring 功能更新、构建工具改进及调试体验提升
    【js】vue获取document.getElementById(a)为null
    禁止扩展对象
    Android修改开机动画
    Ceph介绍与部署
  • 原文地址：https://blog.csdn.net/jiang7701037/article/details/133283777