React Typescript - сгенерируйте HTML в PDF или распечатайте указанный раздел

Question

Я создаю приложение, используя React Typescript. Мне нужна возможность создавать PDF (на стороне клиента). При нажатии кнопки я хочу создать PDF-файл с установленными значениями состояния, найденными на странице, вместе со стилем.

Я пытаюсь найти самый простой способ подойти к этому. Будь то преобразование HTML в PDF или использование Control + P с целевым назначением Save as PDF.

Я не хочу печатать или создавать PDF-файл из всего компонента, только из раздела, который обернут вокруг моего класса printThis.

Какой метод или компонент вы бы порекомендовали?

import * as React from 'react';

export default class WebappProps extends React.Component<WebappProps, {}> {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    async printForm(event) {
        event.preventDefault();
        
        //Either generates form with info within "printThis" class and keeps styled
        //or
        //Opens up print popup(Control + P) with destination set to "Save as PDF"  
    }


  public render(): React.ReactElement<WebappProps> {
        return (
            <div className={styles.printThis}>
                <div className={`${styles.flexWrap} ${styles.flexEnd}`}>
                    <div className={`${styles.singleField} ${styles.halfFlex}`}>
                        Some stuff here
                    </div>
                    <div className={`${styles.singleField} ${styles.halfFlex}`}>
                        More stuff here: {this.state.item1}
                    </div>
                </div>
            </div> 

            <button onClick={this.printForm.bind(this)}>Print</button>              
        );      
    } 

}

Answer 1

Недавно я сделал что-то подобное для создания отчетов форм в формате pdf. Я использовал html2canvas для преобразования компонента в изображение и jsPDF для преобразования изображения в pdf. Вы можете найти эти пакеты в npm.

http://html2canvas.hertzen.com/

https://github.com/MrRio/jsPDF