想要以 8 角显示加载微调器

Question

我有一个下载按钮和表格，将用户数据存储在user.component.html文件中，当用户单击下载按钮时，它将所有表格数据导出到 Excel 文件中。

当下载时间超过 1.5 秒时，我想显示加载微调器。

我正在使用角度 8。

user.component.html文件：

<div class ="container">
  <button (click)="generateExcel()"> 
     Generate Excel</button>
  <table>
      -----table related data
  <\table>
</div>

user.component.ts文件：

generateExcel() {
  //Excel Title, Header, Data
  const title = 'Car buyers Report';
  const header = ["Year", "Month", "User", "Model"]
  const data = [
    [2007, 1, "jo", "Volkswagen Passat"],
    [2007, 1, "mike ", "Toyota Rav4"],
    [2007, 1, "david", "Toyota Avensis"],
    [2007, 1, "milenda ", "Volkswagen Gol"]
  ];

  //Create workbook and worksheet
  let workbook = new Workbook();
  let worksheet = workbook.addWorksheet('Car Data');

  //Add Row and formatting
  let titleRow = worksheet.addRow([title]);
  titleRow.font = { name: 'Comic Sans MS', family: 4, size: 16, underline: 'double', bold: true }
  worksheet.addRow([]);
  let subTitleRow = worksheet.addRow(['Date : ' + this.datePipe.transform(new Date(), 'medium')])

  //Add Image
  let logo = workbook.addImage({
    base64: logoFile.logoBase64,
    extension: 'png',
  });

  worksheet.addImage(logo, 'E1:F3');
  worksheet.mergeCells('A1:D2');

  //Blank Row 
  worksheet.addRow([]);

  //Add Header Row
  let headerRow = worksheet.addRow(header);

  // Cell Style : Fill and Border
  headerRow.eachCell((cell, number) => {
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FFFFFF00' },
      bgColor: { argb: 'FF0000FF' }
    }
    cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }
  })
  // worksheet.addRows(data);

  // Add Data and Conditional Formatting
  data.forEach(d => {
    let row = worksheet.addRow(d);
    let qty = row.getCell(5);
    let color = 'FF99FF99';
    if (+qty.value < 500) {
      color = 'FF9999'
    }

    qty.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: color }
    };
  });

  worksheet.getColumn(3).width = 30;
  worksheet.getColumn(4).width = 30;
  worksheet.addRow([]);

  //Footer Row
  let footerRow = worksheet.addRow(['This is system generated excel sheet.']);
  footerRow.getCell(1).fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: 'FFCCFFE5' }
  };
  footerRow.getCell(1).border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }

  //Merge Cells
  worksheet.mergeCells(`A${footerRow.number}:F${footerRow.number}`);

  //Generate Excel File with given name
  workbook.xlsx.writeBuffer().then((data) => {
    let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    fs.saveAs(blob, 'CarData.xlsx');
  })
}

Answer 1

我想你的writeBuffer调用是花费你最多时间的。

由于writeBuffer是异步的，您可以使用 rxjs observables，它允许您拥有比经典 async/await 更复杂的行为。

首先将您的承诺转换为 observable ：

// here you have a promise
const wBufferPromise = workbook.xlsx.writeBuffer(); 

// and here you have an observable, hence the $ char in the variable name 
const wBufferObservable = from(wBufferPromise ); 

然后，您可以或许用户timeoutWith从RxJS（这是我从来没有使用过，所以我将不能够帮助你在这里。

另一种可能的解决方案是调用setTimeout(myFunc,1500) ，其中myFunc在需要时设置您的微调器可见性。

编辑：请看看Eliseo的评论。