React-PDF Низкая производительность с большим PDF

Question

Я использую React-PDF из npm с функцией PDFDownloadLink для загрузки большого PDF. Но PDF создается при загрузке моего приложения, что создает длительное время задержки.

Я пробовал таймеры, ленивая загрузка компонента, изменение данных документа с помощью useState.

Мне просто нужно загрузить данные документа после нажатия кнопки PDF, а не при каждом отображении страницы.

Answer 1

Попробуйте что-то вроде этого (documentGenerated - это свойство, которое переключает кнопку, которая генерирует компонент PDFDownloadLink.

Если вы продолжаете рендеринг PDF-документа несколько раз, это влияет на производительность приложения и тем самым снижает его. Убедитесь, чтоправильно переключить компонент PDFDonwloadLink .

 {!documentGenerated ? (
            <button
              className="btn"
              onClick={generatePDF}
            >
              Generate PDF
            </button>
          ) : (
            <PDFDownloadLink
              document={<YourComponent {...state} />}
              fileName={outputFilename}
              className="btn btn-primary"
            >
              {({ blob, url, loading, error }) =>
                loading
                  ? 'Loading document...'
                  : 'Document is ready!'
              }
            </PDFDownloadLink>
          )}