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

Answer 1

我看到您尝试使用iTextSharp在服务器端生成PDF。那是iText .NET的旧版本。请使用iText 7（几天前发布的7.1.6）和pdfHTML附加组件重试。它具有改进的HTML和CSS支持。

您的服务器端代码基本上可以很短：

HtmlConverter.ConvertToPdf(html, new FileStream(sMdocFile, FileMode.Create));

当您向选定的电台添加“选中”属性时，iText将选择它。

使用类似这样的内容，因为您已经在评论中写了自己：

document.querySelectorAll('#custom-form-container input[type="radio"]:checked').forEach((element) => {
    element.setAttribute('checked', 'checked');
});

将引导模态打印为PDF

1 个答案: