0

I have created a one web app in that I want to download function as a pdf in that whole page download as a pdf below is my code below code working, a page is download as pdf but does not show any data in that file

$("#download").addEventListener("click", () => {
  let e = !1,
    t = !1,
    r = !1,
    i = !1,
    s = 0;
  if (o.getObjects().forEach(o => {
      let n = o.top + o.height,
        l = o.left + o.width;
      (!1 === e || o.top < e) && (e = o.top), (!1 === r || n > r) && (r = n), (!1 === t || o.left < t) && (t = o.left), (!1 === i || l > i) && (i = l), s += 1
    }), s < 2) return alert(i18n.msg("no_objects"));
  const l = document.createElement("a"),
    a = r - e + 124,
    d = i - t + 124,
    c = new fabric.Rect({
      fill: "white",
      top: -o.height,
      left: -o.width,
      width: 4 * o.width,
      height: 4 * o.height,
      hasBorders: !1,
      hasControls: !1,
      selectable: !1
    }),
    h = new fabric.IText(n, {
      textAlign: "left",
      fontFamily: "sans-serif",
      fontSize: 24,
      fill: "black",
      top: e - 40,
      left: t,
      width: o.width
    });
  o.add(c, h), c.sendToBack(), l.href = o.toDataURL({
    format: "pdf",
    top: e - 50,
    left: t - 50,
    width: d,
    height: a
  }), l.download = `${n}.pdf`, l.style.display = "block", document.body.appendChild(l), l.click(), document.body.removeChild(l), o.remove(c), o.remove(h)
}),

2 Answers2

0

As far as I can tell you are using Fabric, and Canvas toDataUrl only supports png or jpeg. You will need use it to create an image and convert that image into a PDF - you could try out jsPDF for that.

seasick
  • 473
  • 1
  • 4
  • 15
0

It looks like you are using FabricJS. That means you have a canvas. You can access to that canvas and use jsPDF, as @seasick suggested, to convert the data to PDF. Here is another question similar to this and it is already answered. You can use the same method.

Buzzinga
  • 401
  • 3
  • 9