Диаграммы не отображаются в экспортированном PDF-файле

Пожалуйста, обратитесь к примеру ниже: https://stackblitz.com/edit/angular-ivy-eqvhys?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.comComponent.html,src%2Fapp%2Fapp.comComponent.ts, package.json

Пожалуйста, помогите мне решить проблему с видимостью диаграммы в файле PDF.

html2canvas html2pdf ngx-charts

30.04.2024 09:33

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I found a workaround to convert chart into pdf: 

1. Converted chart to png image by using below method

 

    convertChartToImg(chartId): Observable<string> {
            return new Observable(observer => {
              const chart = document.querySelector(chartId);
              if (chart) {
                this.subs.add(this.captureService.getImage(canvas, true)
                  .pipe(
                    tap((img: string) => {
                      observer.next(img)
                    })
                  ).subscribe());
              }
            })
          }

2. Replaced chart with png image.
3. Updated my target element and send pdf.

Рабочий пример, пожалуйста, перейдите по ссылке ниже:

https://stackblitz.com/edit/angular-ivy-y3x9we?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.comComponent.html,src%2Fapp%2Fapp.comComponent.ts, package.json

07.05.2024 14:11