Как добавить речарты в react-pdf

Я использую «recharts» для создания графиков для своего проекта и «react-pdf» для создания отчета. 'Recharts' создает svg в DOM при его использовании, и отображается график.

Есть ли способ, которым я могу использовать эти два вместе и добавить свой компонент «recharts» в свой отчет через react-pdf? например - внутри тега <Document/>.

ссылка в формате react-pdf на веб-сайт

повторно отображает ссылку на веб-сайт

Я видел решение, которое предлагает преобразовать svg rechart в png, сохранить его локально, а затем импортировать и использовать через компонент <Image/> в react-pdf.

Ищите более простой подход к этому вопросу.


reactjs javascript svg recharts react-pdf
person Daniel Cohen    schedule 20.07.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот как я это решил: я использовал эту статью - https://betterprogramming.pub/heres-why-i-m-replacing-html2canvas-with-html-to-image-in-our-react-app-d8da0b85eadf

Рекомендуется использовать пакет html-to-image.

Итак, я дал идентификатор контейнеру компонента rechart и выбрал его с помощью docoument.getElementById(). Затем использовал выбранный идентификатор при запросе html-to-image, например:

  const response = await htmlToImage.toPng(myId);

Затем ответ содержал URL-адрес, который использовался в качестве src для компонента изображения react-pdf.

person Daniel Cohen    schedule 25.07.2021