如何使用 javascript 下载 html 作为 pdf 视图

Question

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)
}),

Answer 1

据我所知，您使用的是 Fabric，而 Canvas toDataUrl仅支持 png 或 jpeg。 您将需要使用它来创建图像并将该图像转换为 PDF - 您可以为此尝试jsPDF 。

Answer 2

看起来您正在使用 FabricJS。 这意味着你有一个 canvas。 您可以访问该 canvas 并按照@seasick 的建议使用 jsPDF 将数据转换为 PDF。 这是另一个与此类似的问题，并且已经得到解答。 您可以使用相同的方法。