Печать бутстрапа модального в PDF - PullRequest
Новая
       14

Печать бутстрапа модального в PDF

0 голосов
/ 03 мая 2019

У меня есть несколько модалей, которые я хотел бы напечатать в PDF. Мне удалось напечатать что-то , но это не совсем верно.

Вот пример того, что я сейчас делаю:

  • Появляется модал, и пользователь взаимодействует с ним. Пользователь нажимает «Принять»
  • Я клонирую модал, я добавляю клон к документу под сгибом.
  • Я превращаю его в холст через html2canvas и создаю изображение холст с .toDataURL
  • Я добавляю изображение к jsPDF объекту с addImage
  • Я удаляю клонированный модал из документа.

У меня проблема в том, что изображение обрезано, но едва заметно. Сама нижняя часть кнопки подтверждения отсутствует.

Я где-то читал, что установка ширины и высоты клона на 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
    });
});

1 Ответ

1 голос
/ 03 мая 2019

Я вижу, что вы пытались создать PDF-файл на стороне сервера с помощью iTextSharp. Это старая версия 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');
});
...