本文主要是介绍纯前端实现表格的导入 [一对多的情况进行导出]，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.通过 xlsx 插件进行
通过npm命令下载后 import * as XLSX from 'xlsx'; 引入
2.直接上代码
//导出表格DownloadExcel() {// 定义Excel表头const headers = ['合同名称', '客户联系人', '客户名称', '关联机会', '关联报价单', '负责人', '协同人', '签订人', '签订日期', '到期日期', '合同状态', '产品合计','整单折扣率', '其他费用', '优惠金额', '合同金额', '合同类型', '收款方式', '发货状态', '物流编号', '退货数', '已收金额', '未收金额', '开票金额', '未开票金额','开票状态', '发货单', '签收单', '装机单', '培训单', '产品名称', '产品编号', '规则', '产品条码', '销售单位', '数量', '单价', '折扣', '售价', '售价小计'];const flattenedData = [];this.Alladdstatus.forEach(item => {if (item.details && Array.isArray(item.details) && item.details.length > 0) {// 如果主对象包含详情数组，为每个详情项创建一行数据item.details.forEach(detailItem => {const row = [item.name || '',item.customerContact || '',item.clientName || '',item.associationOpportunity || '',item.associationSheet || '',item.headerInfo || '',item.collaboratorInfo || '',item.signerName || '',item.signingDate || '',item.dueDate || '',item.contractStatus || '',item.totalProduct || '',item.singleDiscount || '',item.otherExpenses || '',item.discountAmount || '',item.contractAmount || '',item.contractType || '',item.paymentMethod || '',item.shippingStatus || '',item.LogisticsId || '',item.returnQuantity || '',item.receivedAmount || '',item.outstandingAmount || '',item.invoiceAmount || '',item.uninvoicedAmount || '',item.invoiceStatus || '',item.deliveryNote.length > 0 ? '有' : '',item.receipt.length > 0 ? '有' : '',item.installationOrder.length > 0 ? '有' : '',item.trainingForm.length > 0 ? '有' : '',detailItem.produceName || '',detailItem.productId || '',detailItem.spec || '',detailItem.produceCode || '',detailItem.number || '',detailItem.producePrice || '',detailItem.price || '',detailItem.discount || '',detailItem.salePrice || '',detailItem.saleTotalPrice || ''];flattenedData.push(row);});} else {// 如果没有详情数组，添加一行只有主对象信息的数据const row = [item.name || '',item.customerContact || '',item.clientName || '',item.associationOpportunity || '',item.associationSheet || '',item.headerInfo || '',item.collaboratorInfo || '',item.signerName || '',item.signingDate || '',item.dueDate || '',item.contractStatus || '',item.totalProduct || '',item.singleDiscount || '',item.otherExpenses || '',item.discountAmount || '',item.contractAmount || '',item.contractType || '',item.paymentMethod || '',item.shippingStatus || '',item.LogisticsId || '',item.returnQuantity || '',item.receivedAmount || '',item.outstandingAmount || '',item.invoiceAmount || '',item.uninvoicedAmount || '',item.invoiceStatus || '',item.deliveryNote.length > 0 ? '有' : '',item.receipt.length > 0 ? '有' : '',item.installationOrder.length > 0 ? '有' : '',item.trainingForm.length > 0 ? '有' : '','', '', '', '', '', '', '', '', '', '', '' // 详情项相关的列为空];flattenedData.push(row);}});const worksheet = XLSX.utils.aoa_to_sheet([headers, ...flattenedData]);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');XLSX.writeFile(workbook, '合同详细.xlsx');},这篇关于纯前端实现表格的导入 [一对多的情况进行导出]的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
