test.js

function loadTransactions() {
  let tills = [];
  let users = [];
  let sales = 0;
  let transact = 0;
  let unique = 0;

  sold_items = [];
  sold = [];

  let counter = 0;
  let transaction_list = "";
  let query = `by-date?start=${start_date}&end=${end_date}&user=${by_user}&status=${by_status}&till=${by_till}`;

  $.get(api + query, function(transactions) {
    if (transactions.length > 0) {
      $("#transaction_list").empty();
      $("#transactionList")
        .DataTable()
        .destroy();

      allTransactions = [...transactions];

      transactions.forEach((trans, index) => {
        sales += parseFloat(trans.total);
        transact++;

        trans.items.forEach(item => {
          sold_items.push(item);
        });

        if (!tills.includes(trans.till)) {
          tills.push(trans.till);
        }

        if (!users.includes(trans.user_id)) {
          users.push(trans.user_id);
        }

        counter++;
        transaction_list += `<tr>
                                  <td>${trans.order}</td>
                                  <td class="nobr">${moment(trans.date).format(
                                    "YYYY MMM DD hh:mm:ss"
                                  )}</td>
                                  <td>${settings.symbol + trans.total}</td>
                                  <td>${
                                    trans.paid == ""
                                      ? ""
                                      : settings.symbol + trans.paid
                                  }</td>
                                  <td>${
                                    trans.change
                                      ? settings.symbol +
                                        Math.abs(trans.change).toFixed(2)
                                      : ""
                                  }</td>
                                  <td>${
                                    trans.paid == ""
                                      ? ""
                                      : trans.payment_type == 0
                                      ? "Cash"
                                      : "Card"
                                  }</td>
                                  <td>${trans.till}</td>
                                  <td>${trans.user}</td>
                                  <td>${
                                    trans.paid == ""
                                      ? '<button class="btn btn-dark"><i class="fa fa-search-plus"></i></button>'
                                      : '<button onClick="$(this).viewTransaction(' +
                                        index +
                                        ')" class="btn btn-info"><i class="fa fa-search-plus"></i></button></td>'
                                  }</tr>
                      `;

        if (counter == transactions.length) {
          $("#total_sales #counter").text(
            settings.symbol + parseFloat(sales).toFixed(2)
          );
          $("#total_transactions #counter").text(transact);

          const result = {};

          for (const { product_name, price, quantity, id } of sold_items) {
            if (!result[product_name]) result[product_name] = [];
            result[product_name].push({
              id,
              price,
              quantity
            });
          }

          for (item in result) {
            let price = 0;
            let quantity = 0;
            let id = 0;

            result[item].forEach(i => {
              id = i.id;
              price = i.price;
              quantity += i.quantity;
            });

            sold.push({
              id: id,
              product: item,
              qty: quantity,
              price: price
            });
          }

          loadSoldProducts();

          if (by_user == 0 && by_till == 0) {
            userFilter(users);
            tillFilter(tills);
          }

          $("#transaction_list").html(transaction_list);
          $("#transactionList").DataTable({
            order: [[1, "desc"]],
            autoWidth: false,
            info: true,
            JQueryUI: true,
            ordering: true,
            paging: true
          });
        }
      });
    } else {
      Swal.fire(
        "No data!",
        "No transactions available within the selected criteria",
        "warning"
      );
    }
  });
}

################### pdf generator ##############

 $("#print_transactions").click(function() {
    $("#loading").show();

    $("#transactionList")
      .DataTable()
      .destroy();

    const filename = "transactionList.pdf";

    html2canvas($("#all_transactions").get(0)).then(canvas => {
      let height = canvas.height * (25.4 / 96);
      let width = canvas.width * (25.4 / 96);
      let pdf = new jsPDF("p", "mm", "a4");
      
      pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0, width, height);

      $("#loading").hide();
      pdf.save(filename);
    });

    $("#transactionList").DataTable({
      order: [[1, "desc"]],
      autoWidth: false,
      info: true,
      JQueryUI: true,
      ordering: true,
      paging: true
    });

    $(".loading").hide();
  }