React JS + PDFKit

Question

J'essaie de comprendre comment on peut faire fonctionner le kit PDF dans React JS.

Mon exigence simple est de rendre un fichier dans le navigateur en utilisant ReactJS et PDFKit.

En regardant les tutoriels, il y a des références à quelques options dans lesquelles PDFKit peut fonctionner dans le navigateur, cependant il n'est pas clair comment cela s'appliquerait dans le monde de React JS et en particulier un projet basé sur Create React App....

http://pdfkit.org/demo/browser.html

https://www.npmjs.com/package/pdfkit#browser-usage

Quelqu'un a-t-il trouvé un exemple fonctionnel de création d'une application React basée sur React JS et PDFKit ?

Google semble être un peu à court de réponses ce soir.

Answer 1

J'ai réussi à trouver une réponse à cette question.

C'est une combinaison de ce et ce .

Mais juste pour donner un aperçu/codes clés. Dans mon application react, j'ai ceci (faire une demande de post vers mon serveur API) :

            <Button
              onClick={(e) => {
                const { _id } = record;
                fetch(`/api/pdf`, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({
                    filename: "test",
                    content: "Testing Content"
                  }),
                }).then(async res => {
                  if (res.status === 200) {
                    const blob = await res.blob();
                    const file = new Blob(
                      [blob], 
                      {type: 'application/pdf'}
                    );
                    //Build a URL from the file
                    const fileURL = URL.createObjectURL(file);
                    //Open the URL on new Window
                    window.open(fileURL);  
                  }
                })
            >    
              Download
            </Button>

Et dans le serveur API (application node express), j'ai ceci :

const postMethod = () => async (req, res, next) => {
   const doc = new PDFDocument()
   let filename = req.body.filename
   // Stripping special characters
   filename = encodeURIComponent(filename) + '.pdf'
   // Setting response to 'attachment' (download).
   // If you use 'inline' here it will automatically open the PDF
   res.setHeader('Content-disposition', 'attachment; filename="' + filename + '"')
   res.setHeader('Content-type', 'application/pdf')
   const content = req.body.content
   doc.y = 300
   doc.text(content, 50, 50)
   doc.pipe(res)
   doc.end()
}

Answer 2

C'est exactement ce que je voulais faire (rendu côté client de PdfKit dans une application React démarrée avec create-react-app). J'ai réussi à le faire fonctionner en utilisant pdfkit-webpack-exemple et personnaliser-cra .

Source :

Démonstration en direct