ReactJS, я хочу конвертировать компоненты в pdf, также прокручивая страницы

Question

Я показываю одну модальную страницу, которая состоит из 3 компонентов. Есть 5 или более таблиц. (Я использую semanti c -ui)

На самом деле, мне удалось конвертировать в pdf, но это было не очень хорошо. html -> pdf

Конвертированные страницы очень уродливы.

Поэтому я искал inte rnet и нашел страницу-> image-> pdf.

мои страницы есть прокрутка x и y.

И я попытался конвертировать (page-> image-> pdf), мне не удалось. PDF-файл показывает только одну страницу. Я пытался выполнить стекопоток ответов, но мне не удалось.

Пожалуйста, помогите мне.

Пользовательский компонент: EnvTable (широкие 2 таблицы), SmartData (длинные 5 таблиц), MyChart (более 8 таблиц и диаграмм )

<Modal size='fullscreen' open={this.state.openPdf} onClose={this.close} style={{ position: "static" }}>
        <div id="divToPrint" className="divToPrint">

          <Modal.Content image scrolling>
            <Header as='h1' >{title}</Header>
              <Divider />
              <Header as='h4' >Header Title</Header>
              <EnvTable envData={envData}/>

              <Header as='h4' >Smart Data</Header>
            <SmartData sData={sData}/>

            <Header as='h4' >Results</Header>
            <MyChart trendData={trendData} /> 
          </Modal.Content>

          </div>
          <Modal.Actions>
          <button onClick={this.printDocument}>Print</button>
<button onClick={this.printDocument_html}>Print_html</button>
          </Modal.Actions>
        </Modal>

printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');

        // origin
        const pdf = new jsPDF('p', 'pt', 'a4');
         pdf.addImage(imgData, 'JPEG', 0, 0);
         pdf.save("download.pdf");
      });
  }

  printDocument_html() {
    window.html2canvas = html2canvas
    let pdf = new jsPDF('p', 'pt', 'a4');
        pdf.html(document.getElementById('divToPrint'), {
            callback: function () {
                pdf.save('myDocument.pdf');
                window.open(pdf.output('bloburl')); // To debug.
            }
        });

  }```

Answer 1

Это не идеально, но я преобразовал это !! :)

Вот мой код.

const input = document.getElementById('divToPrint');
const inputHeight = input.clientHeight;
const inputWidth = input.clientWidth;
let height = pdf.internal.pageSize.height;
    let pageHeightInPixels = inputHeight;
    let pages = pageHeightInPixels / height;

    console.log(pageHeightInPixels + ',' + height)

    const roundOff = Number(pages.toString().split('.')[1].substring(0, 1));
    const pageNo = (roundOff > 0 ? pages + 1 : pages);
    let pageCount = pages < 1 ? 1 : Math.trunc(pageNo);


html2canvas(input)
      .then((canvas) => {

        const imgData = canvas.toDataURL('image/png');        

        // origin       
         for (let i = 1; i <= pageCount ; i++) {
              let pdfStartingHeight = height * (i - 1);
              pdf.addImage(imgData, 'PNG', 0, -pdfStartingHeight, inputWidth * 0.8, inputHeight * 0.8);
              if (i < pageCount) {
                  pdf.addPage();
              }
            }
            pdf.save("download.pdf");
      });
  }

Надеюсь, он вам поможет.