CODEWITHSUNDEEP
javascriptc#itextjspdfhtml2canvas
spuppett
spuppett

Reputation: 557

Printing bootstrap modal to PDF

I have some modals that I would like to print to PDF. I've managed to get something to print, but it's just not quite right.

Here's a break down of what I'm currently doing:

The issue I'm having is that the image is cropped, but only just barely. The very bottom of the accept button is missing.

I read somewhere that setting the width and height of the clone to 3000 could help with that, but no changes. I tried playing with the addImage parameters, but nothing.

I could also do this server side, but my quick playing around with iTextSharp didn't pan out either. It didn't show values of radio buttons or textboxes, which are very much needed.

I've been messing with this for 2 days, but I'm at a loss.

Cloning code:

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 code:

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

Upvotes: 0

Views: 2185

Answers (1)

Amedee Van Gasse
Amedee Van Gasse

Reputation: 7634

I see that you tried to generate PDF server-side with iTextSharp. That's the old version of iText .NET. Please try again, with iText 7 (7.1.6 was released a few days ago) + the pdfHTML add-on. It has much improved HTML and CSS support.

Your server-side code can essentially be as short as:

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

When you add a 'checked' attribute to the radio that is selected, then iText will select it.

Use something like this, as you already wrote yourself in your comment:

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

Upvotes: 1

Related Questions