将 bootstrap 模式打印为 PDF

Question

我有一些模态框要打印成 PDF。我设法打印了 一些东西，但它不太正确。

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

模态弹出，用户与之交互。用户点击 'Accept'
我克隆了模式，我将克隆附加到折叠下方的文档中。
我通过 html2canvas 将其转换为 canvas 并创建了图像 canvas 和 .toDataURL
我使用 addImage

jsPDF

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

我遇到的问题是图像被裁剪了，但只是勉强裁剪了一下。接受按钮的最底部丢失了。

我在某处读到，将克隆的宽度和高度设置为 3000 可能会有所帮助，但没有任何变化。我尝试使用 addImage 参数，但没有。

我也可以做这个服务器端，但我快速使用 iTextSharp 也没有成功。它没有显示非常需要的单选按钮或文本框的值。

折腾了2天，不知所措

克隆代码：

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

当您将 'checked' 属性添加到 selected 的收音机时，iText 将 select 它。

使用类似这样的东西，因为您已经在评论中写道：

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

将 bootstrap 模式打印为 PDF

Printing bootstrap modal to PDF

javascript

c#

itext

html2canvas

jspdf