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')
}