Создайте PDF-файл веб-страницы Angular с динамической привязкой и разрешите загрузить его со страницы панели мониторинга

У меня есть проект, созданный с использованием Angular, Django и MongoDB в качестве базы данных.
У меня есть страница в http://localhost:4200/#/print/layout
Эта страница с печатным макетом должным образом получает все данные из API, который передает данные из серверной части.
Если я хочу распечатать / сохранить в формате PDF веб-страницу с макетом для печати, я могу нажать Ctrl + P для этого.
Но теперь я подумываю о том, чтобы разместить кнопку загрузки PDF-файла по этому адресу - http://localhost:4200/#/project

Здесь я укажу все необходимые параметры, такие как /?plant_id=3&project_id=121&username=pratikpol@gmail.com и другие необходимые заголовки.

Могу ли я загрузить веб-страницу в формате PDF, даже не находясь на этой странице с печатным макетом и не просматривая эту страницу с печатным макетом ???
Я просто хочу, чтобы функция Ctrl + P работала при нажатии кнопки Загрузить PDF.

Я хочу сделать все это только на интерфейсе (Angular ), я не могу использовать серверную часть, потому что на странице с печатным макетом у меня очень сложные SVG-файлы и некоторые другие сложные стили, которые должным образом обрабатываются в Angular.

Я пробовал использовать серверную часть и использую библиотеку WeasyPrint Python, которая преобразует HTML в PDF.
Таким образом, мне пришлось написать то же самое для того же HTML-шаблона Django, что и для HTML-шаблона Angular.
Когда HTML-файл создан должным образом, все данные привязаны, затем используется WeasyPrint для преобразования HTML в PDF.
Но тогда мои сложные SVG-файлы не создаются должным образом с помощью WeasyPrint.

Django HTML -
(https://i.sstatic.net/JpaBc1y2.png)

Сгенерированный PDF-файл с помощью WeasyPrint (https://i.sstatic.net/YjmZYmkx.png)

Да, вы абсолютно точно можете загрузить веб-страницу в формате PDF, фактически не переходя на нее. Есть несколько известных мне подходов:

Используйте html2canvas + jsPDF:

generatePDF() {
  const iframe = document.createElement('iframe');
  iframe.style.visibility = 'hidden';
  iframe.src = 'http://localhost:4200/#/print/layout?plant_id=3&project_id=121';
  iframe.onload = () => {
    html2canvas(iframe.contentDocument.body).then(canvas => {
      const pdf = new jsPDF();
      pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
      pdf.save('document.pdf');
      document.body.removeChild(iframe);
    });
  };
  document.body.appendChild(iframe);
}

Альтернативный подход с использованием HttpClient:

this.http.get('http://localhost:4200/#/print/layout?params', {responseType: 'text'})
  .subscribe(html => {
    // Insert into temp div and convert with html2canvas/jsPDF
  });

Эти методы могут по-прежнему не работать с вашими сложными SVG-файлами. Для идеального рендеринга без перестройки шаблонов рассмотрите возможность использования https://pagesnap.co - он обрабатывает сложные SVG-файлы и стили с помощью простого вызова API.

Вернуться на верх