@ Реагировать-PDF / визуализатор. Как создать PDF и скачать его

Question

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

Можно настроить что-то вроде щелчка здесь, чтобы загрузить документ?

Пожалуйста, обратитесь к коду ниже:

import React, {Component} from 'react';
import { PDFViewer } from '@react-pdf/renderer';
import FeeAcceptance from '../Pdfgenerator/FeeAcceptance'

class AcceptFees extends Component {

  render () {
      return (
          <>
              <PDFViewer>
                  <FeeAcceptance member_detail={'test'} />
              </PDFViewer >

              <h1>click<a href="?????"> here </a>to download the document</h1>
          </>
      );
  }
}

export default AcceptFees;

Заранее спасибо.

Answer 1

Если вы столкнулись с той же проблемой, я нашел кое-что, что поможет. Замените PDFViewer на код ниже:

<PDFDownloadLink document={<FeeAcceptance />} fileName="fee_acceptance.pdf">
  {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>

https://react-pdf.org/components

Answer 2

Мы также можем использовать ReactPDF.pdf. вот небольшой пример кода асинхронной функции, которая возвращает (или даже blobесли того требует!). Мы можем использовать это, чтобы загрузить наш PDF-файл.

      renderUrl = async() => new Promise((resolve, reject) => {
const blob = await ReactPDF.pdf(<FeeAcceptance member_detail={'test'} />).toBlob()
const url = URL.createObjectURL(blob)
if(url && url.length>0){
    resolve(url)
  }
}
).then(res => res).catch(err => console.log(err))

Скачать сгенерированный url мы можем использовать download атрибут aярлык. Вот пример

      let sampleTab = window.open()
if(sampleTab) {
  renderUrl().then(generatedUrl => {
    if( generatedUrl ){
      let aTag = document.createElement('a')
      aTag.href =  generatedUrl
      aTag.style = "display: none";
      aTag.download = 'FeeAcceptance.pdf'
      document.body.appendChild(aTag)
      aTag.click()
    } // else -> means something went wrong during pdf generation
  }).catch(err => console.log(err))
} // else -> means new tab can't be opened ... (some Adblock issue)