vue 3.x 前端导出功能

　首页安装插件   npm install xlsx

在当前页面中引入

import * as XLSX from 'xlsx'

点击事件

 

　　 <a-button :disabled="orderList.length === 0" :size="'small'" @click="exportExcel">

        <h-icon-export />

        {{ t("Sample.Export") }}

      </a-button>

 

const exportExcel = () => {// 创建一个工作表（worksheet）const orderList = props.orderList.map((item: any) => {const applyTypeLabel = applyTypeList.find(type => type.value === item.applyType)?.label || ''const deliverToTypeLabel = deliveryList.find(type => type.value === item.deliverToType)?.label || ''const ResponsiblePerson = item.resPersonList.map((person: any) => `${person.responsibleName}(${person.responsibleCode})`).join(', ')return {'Material Code': item.materialCode,'Material Description': item.materialDescription,'Apply For': applyTypeLabel,'Responsible Person': ResponsiblePerson,Price: item.price,'Request Arrival Date': item.planArrivedTime,'Planed Return Date': item.planReturnTime,'Ship To': `(${item.shipToCode}) ${item.shipToName}`,'Deliver To': deliverToTypeLabel,'Contract Person': item.contractPerson,'Contract Tel': item.contractTel,'House No': item.houseNumber,'Street Address': item.streetAddress,District: item.district,City: item.city,'Postal Code': item.postalCode,'L1 Region': item.regionLv1Name}})const ws = XLSX.utils.json_to_sheet(orderList)// 创建一个工作簿（workbook）const wb = XLSX.utils.book_new()XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')// 导出 Excel 文件XLSX.writeFile(wb, 'orderList.xlsx')
}