将引导模态打印为PDF

Question

我有一些要打印为PDF的模式。我设法打印了一些东西，但这不是很正确。

以下是我目前正在做的事情的分解：

弹出该模式，并与用户进行交互。用户点击“接受”

我克隆模式，将克隆附加到折叠下面的文档中。

我通过html2canvas将其转换为画布，并使用 .toDataURL

我将图像添加到jsPDF对象addImage

我从文档中删除了克隆的模式。

我遇到的问题是图像被裁剪了，但是只是被裁剪了一点而已。缺少接受按钮的最底部。

我在某处读到，将克隆的宽度和高度设置为3000可以解决此问题，但没有任何变化。我尝试使用addImage参数，但是什么也没有。

我也可以在服务器端进行操作，但是我对iTextSharp的快速试用也没有成功。它没有显示非常需要的单选按钮或文本框的值。

我已经搞砸了两天了，但是我很茫然。

克隆代码：

hiddenClone: (element) => {

   const clone = element.cloneNode(true);

   clone.classList.remove('modal-content');

   const style = clone.style;

   style.position = 'relative';

   style.top = window.innerHeight + 'px';

   style.left = 0;

   style.width = '3000px';

   style.height = '3000px';

   style.background = '#fff';

   document.body.appendChild(clone);

   return clone;

}

pdf代码：

const pdf = new jsPDF('p', 'mm', 'a4');

const clone = utils.hiddenClone(form);

html2canvas(clone).then((canvas) => {

  const img = canvas.toDataURL('image/png', 1.0)

  pdf.deletePage(1);

  pdf.addPage("p");

  pdf.addImage(img, 'PNG', 10, 0, 150, 180);

  const blob = pdf.output('blob');

    $.ajax({

       url: `/profile/People/SignedDocument/${id}`,

       type: "POST",

       data: blob,

       contentType: "application/pdf; charset=utf-8",

       processData: false

    });

});