Excel export Vue problem em PROD

Posted by: raphael.silva on 25 September 2020, 7:24 am EST

    • Post Options:
    • Link

    Posted 25 September 2020, 7:24 am EST

    I made a export excel and all work in DEV but when is set for PROD the excel is created only first line.

    I tried Promise, Async/await and callback. All modes work in DEV but don’t work in PROD.

    I beleve that this problem ocurrent when finish de first loop for.

    function that call montaExcel( whit callback ) after save file.

    
    onExportExcelClick: async function () {
          this.$nprogress.start()
          var nomeXLSX = `${this.reportName} ${moment().format('DD-MM-YYYY hh-mm')}`
          await montaExcel(this.grid, this.dadosDetail, this.excelDetail, this.reportName, (back) => {
            back.saveAsync(nomeXLSX);
          })
        },
    
    

    fuction that mount excel

    function montaExcel (grid, dadosDetail, excelDetail, reportName,  callback){
      let book = new wjcXlsx.Workbook(),
        sheet = new wjcXlsx.WorkSheet(),
            rows = sheet.rows,
            r = 1
        rows[0] = new wjcXlsx.WorkbookRow()
        //FIXME: não esta funcioandno wijmo frozen, aguardando resposta do wijmo
        //sheet.frozenPane = new wjcXlsx.WorkbookFrozenPane()
        for (let index = 0; index < 1; index++) {
        for (const header of grid.columns) {
          if (header.visible){
            sheet.columns[header.index] = new wjcXlsx.WorkbookColumn();
            sheet.columns[header.index].width = header.width
            sheet.columns[header.index].style = new wjcXlsx.WorkbookStyle(),
            sheet.columns[header.index].style.hAlign = header.align === 'center' ? wjcXlsx.HAlign.Center : header.align === 'right' ? wjcXlsx.HAlign.Right : wjcXlsx.HAlign.Left
            sheet.columns[header.index].style.format = "0";
            sheet.frozenPane = new wjcXlsx.WorkbookFrozenPane();
            sheet.frozenPane.rows = 1;
            sheet.frozenPane.columns = 0;
            rows[0].cells[header.index] = new wjcXlsx.WorkbookCell()
            rows[0].cells[header.index].style = new wjcXlsx.WorkbookStyle(),
            rows[0].cells[header.index].style.fill = new wjcXlsx.WorkbookFill();
            rows[0].cells[header.index].style.fill.color = '#EEEEEE';
            rows[0].cells[header.index].style.font = new wjcXlsx.WorkbookFont();
            rows[0].cells[header.index].value = header.binding
            rows[0].cells[header.index].style.font.bold = true;
            rows[0].cells[header.index].style.font.color = '#444444';
          }
        }
        //principal
        grid.rows.forEach(row => {
          if(row.constructor.name === "Row") {
            rows[r] = new wjcXlsx.WorkbookRow()
            for (const data in row.dataItem) {
              var collum = grid.columns.find(x=> x.binding === data && x.visible === true)
              if(collum){
                rows[r].cells[collum.index] = new wjcXlsx.WorkbookCell()
                rows[r].cells[collum.index].value = row.dataItem[data]
              }
            }
            r++
            //detail
            if(dadosDetail){
              var details = dadosDetail.items.filter(x=> x[excelDetail.key] === row.dataItem[excelDetail.key])
              //cabeçalho details
              if(details){
                rows[r] = new wjcXlsx.WorkbookRow()
                rows[r].groupLevel = 1
                rows[r].visible = false
                var col = 1
                for(const cd in excelDetail.headers){
                  rows[r].cells[col] = new wjcXlsx.WorkbookCell()
                  rows[r].cells[col].style = new wjcXlsx.WorkbookStyle(),
                  rows[r].cells[col].style.fill = new wjcXlsx.WorkbookFill();
                  rows[r].cells[col].style.font = new wjcXlsx.WorkbookFont();
                  rows[r].cells[col].value = excelDetail.headers[cd].header
                  rows[r].cells[col].style.hAlign = excelDetail.headers[cd].align === 'center' ? wjcXlsx.HAlign.Center : excelDetail.headers[cd].align === 'right' ? wjcXlsx.HAlign.Right : wjcXlsx.HAlign.Left
                  rows[r].cells[col].style.fill.color = '#EEEEEE';
                  rows[r].cells[col].style.font.bold = true;
                  rows[r].cells[col].style.font.color = '#444444';
                  if(sheet.columns[col]){
                    sheet.columns[col].width = excelDetail.headers[cd].width > sheet.columns[col].width ? excelDetail.headers[cd].width : sheet.columns[col].width
                  }else{
                    sheet.columns[col] = new wjcXlsx.WorkbookColumn();
                    sheet.columns[col].width = excelDetail.headers[cd].width
                    sheet.columns[col].style = new wjcXlsx.WorkbookStyle()
                    sheet.columns[col].style.format = "0";
                  }
                  excelDetail.headers[cd].col = col
                  col++
                }
                r++
                for (const detail in details) {
                  rows[r] = new wjcXlsx.WorkbookRow()
                  rows[r].groupLevel = 1
                  rows[r].visible = false
                  for(const dataDetail in details[detail]){
                    var colDetail = excelDetail.headers.find(x=> x.binding === dataDetail)
                    if(colDetail){
                      rows[r].cells[colDetail.col] = new wjcXlsx.WorkbookCell()
                      rows[r].cells[colDetail.col].style = new wjcXlsx.WorkbookStyle()
                      rows[r].cells[colDetail.col].style.fill = new wjcXlsx.WorkbookFill();
                      rows[r].cells[colDetail.col].style.fill.color = '#F7F7F7';
                      rows[r].cells[colDetail.col].style.hAlign = colDetail.align === 'center' ? wjcXlsx.HAlign.Center : colDetail.align === 'right' ? wjcXlsx.HAlign.Right : wjcXlsx.HAlign.Left
                      rows[r].cells[colDetail.col].value = details[detail][dataDetail]
                    }
                  }
                  r++
                }
              }
            }
          }
        });
        for (const header of grid.columns) {
          if (header.visible){
            rows[0].cells[header.index].value = header.header
          }
        }
        }
        sheet.name = reportName;
        book.sheets.push(sheet);
        return callback(book)
      }
    

    The result in DEV have the all data and result in PROD have only header.

    Wijmo Excel error.zip

  • Posted 28 September 2020, 5:49 am EST

    Hi Raphael,

    Can you also provide the data being used in your application? I tried to replicate the issue with custom data but I was unable to replicate it and I was also not able to properly convert the excel file due to which your code snippet did not work.

    If you could also provide the JSON data in a file, then it will become easier for us to investigate.

    Regards,

    Ashwin

  • Posted 30 September 2020, 11:21 am EST

    ashwin.saxena

    I am sending json file of the main grid (FlexGrid) and a file json aboult grid details (data of the details) and other that have headers of the details . The result on the files json created the files excel.Files excel wijmo DEV vs PROD.zip

  • Posted 1 October 2020, 9:32 am EST

    Hi Raphael,

    Thanks for the update. But I was unable to find any data in the Json_Grid_Main.json file. It seems that it is a stringified version of a Vue component. Can you please provide me with the actual data which you used in FlexGrid?

    I also tried to replicate your issue with Json_Grid_Details.json data but I was unable to replicate it. Please refer to the sample attached.

    Can you please check the sample and let me know whether I am missing something in order to replicate the issue? You can also modify the sample according to your application so that it replicates your issue.

    ~regards

    vue export.zip

  • Posted 1 October 2020, 4:15 pm EST

    Hi ashwin.saxena

    I made the code work with my datas and i am sending the files developement.xlsx

    production.xlsx and WijmoCode.xlsx(your code)

    All files use the same datas but only in Production doesn’t work.

    Problem export Excel.zip

  • Posted 5 October 2020, 8:36 am EST

    Hi,

    I was able to replicate the issue with your sample and have forwarded this to the developers for further investigation with internal tracking id 466670. I will update you once I will hear from them.

    ~regards

  • Posted 8 October 2020, 8:29 am EST

    Hi,

    Your sample is not working because the code is minified in the production. So, the code below does not work.

    if (row.constructor.name === "Row")
    

    It should be changed to:

    import * as wjcGrid from "@grapecity/wijmo.grid";
    
    if (row instanceof wjcGrid.Row) {}
    

    Regards,

    Ashwin

    export fixed.zip

  • Posted 9 October 2020, 10:57 am EST

    ashwin.saxena

    solved my problem!

    Thanks!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels