纯前端实现表格的导入 [一对多的情况进行导出]

最新推荐文章于 2024-06-07 23:26:45 发布

始终坚持在保安岗位

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量255

点赞数 3

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_51391923/article/details/138575732

版权

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