如何使用typescript使json数据以pdf格式转换

Question

我有json数据，我需要将其转换为PDF格式，点击UI中的PDF按钮。我希望pdf格式以此模板格式显示。我做了一些事情，但我没有得到如何将响应绑定到pdf函数。在这里我想要2个场景得到匹配，这里在"actualExpenses"数组中我需要显示块中的所有值并且在每个“actualExpenses”对象数组中都有"expenses"数组，我希望这个"expenses"对象数组恰好位于“ actualExpenses“特定对象。

但是：ぁzxswい

模板：

DEMO

TS：

任何人都可以帮助我绑定值并使我的pdf显示为模板，我希望布局很好，现在唯一的问题是将值绑定到模板。

Answer 1

你的

captureScreen() {
    this.displayTable = true;
    let grossItems = [];
    grossItems.push(this.grossItems);
    console.log(grossItems)
    var doc = new jsPDF();
        var col = [
          "Actual",
          "Based Amount",
          "Fixed %",
          "80% GU ",
          "85% GU",
          "90% GU",
          "95% GU",
          "100% GU"
        ];
        var col1 = [
          "Estimate",
           "Based Amount",
          "Fixed %",
          "80% GU ",
          "85% GU",
          "90% GU",
          "95% GU",
          "100% GU"
        ];
        var rows = [];
        for (let i = 0; i < grossItems[0].actualExpenses.length; i++) {
          var temp = [];
          for (var key in grossItems[0].actualExpenses[i]) {
            temp.push(grossItems.actualExpenses[i][key]);
          }
          rows.push(temp);
          console.log(temp, "temp");
        }
        doc.setFont("Times New Roman");
        doc.setFontSize(10);
        doc.text(20, 10, grossItems.propertyName);
        doc.text(20, 20, "Property Name Goes Here");
        doc.text(20, 30, "Budgeted Year:");
        doc.setTextColor(0, 0, 0);
        doc.text(20, 40, "Actual Occupancy:");
        doc.autoTable(col, rows, {
          theme: "plain",
          startY: 45,
          margin: {
            top: 45
          },
          drawHeaderRow: (head, data) => {
            data.doc.setLineWidth(0.7);
            data.doc.setDrawColor(0, 0, 0);
            data.doc.line(
              data.cursor.x,
              data.cursor.y,
              data.cursor.x + data.table.width,
              data.cursor.y
            );
            data.doc.line(
              data.cursor.x,
              data.cursor.y + head.height,
              data.cursor.x + data.table.width,
              data.cursor.y + head.height
            );
          }
        });
        doc.autoTable(col1, rows, {
          theme: "plain",
          startY: 100,
          margin: {
            top: 100
          },

          drawHeaderRow: (head, data) => {
            data.doc.setLineWidth(0.7);
            data.doc.setDrawColor(0, 0, 0);

            data.doc.line(
              data.cursor.x,
              data.cursor.y,
              data.cursor.x + data.table.width,
              data.cursor.y
            );

            data.doc.line(
              data.cursor.x,
              data.cursor.y + head.height,
              data.cursor.x + data.table.width,
              data.cursor.y + head.height
            );
          }
        });
        document
          .getElementById("convertToPdf")
          .setAttribute("src", doc.output("datauri"));
 }

应该是这样的。

captureScreen()