使用react钩子和promises来加载动画以导出pdf

时间:2019-11-13 17:27:22

标签: reactjs promise react-hooks jspdf

我正在尝试添加加载动画,以便用户在选择导出pdf时可以看到它正在加载(我正在使用jspdf)。我打开了在下面的Promise中导出pdf的函数,并在其下面的函数中使用钩子调用了它,以将加载动画设置为。,然后将其关闭。我看到的是按钮冻结,没有加载动画发生,几秒钟后它下载了文件。我不确定自己在做什么错,我真的没有诺言。

exportToPdf: function (filename, rows, columns, download) {

    return new Promise((resolve,reject) => {


      var headers = this.generateHeaders(columns);
      //
      var rowData = this.generateRows(columns, rows);


      var doc = new jsPDF({
        putOnlyUsedFonts: true,
        orientation: 'landscape',
        format: 'letter'
      });

      var totalPagesExp = "{total_pages_count_string}";

      var pageContent = function (data) {
        // HEADER

        let logo = null;

        var img = new Image;

        img.crossOrigin = "";
        img.src = image;

        doc.addImage(img, 'PNG', 3, 3, 10, 10);

        doc.text(filename, data.settings.margin.left + 20, 10, {align: 'center'});

        // FOOTER

        var str = "Page " + data.pageCount;

        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
          str = str + " of " + totalPagesExp;
        }

        doc.setFontSize(10);
        doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 10);
      };


      doc.autoTable({
        head: [headers], body: rowData, theme: 'grid', didDrawPage: pageContent,
        headStyles: {fillColor: 100, fontSize: 10}, columnStyles: {halign: 'center'}
      });

      doc.putTotalPages(totalPagesExp);

      if (download) {
        // resolve(doc);
        doc.save(date + this.formatTitle(filename) + '.pdf');
        resolve('resolved');

      } else {
        doc.output('blob', date + this.formatTitle(filename) + '.pdf');
      }

    })

  }

const convertToPdf = (boolean) => {
    setLoading(true);
    ExportData.exportToPdf(tableTitle, rows, columns, boolean).then(result=>{
      setLoading(false);
    });

  }

0 个答案:

没有答案