PDF generated with html2pdf and sent directly to FastAPI is blank

Question

I am trying to send a PDF that is generated with the very helpful html2pdf.js library, directly via Email using a FastAPI Backend.

After a lot of tinkering, the file is sent as a Blob, but only contains an empty page.

The client side code is looking as follows:

sendPDF() {
            var opt = {
                image:        { type: 'jpeg', quality: 1 },
                html2canvas:  { scale: 3 },
                jsPDF:        { unit: 'mm', format: 'A5', orientation: 'portrait' }
                };

            var element = document.querySelector('.recipeList')
            
           html2pdf()
             .set(opt)
             .from(element)
             .outputPdf()
             .then(function(pdf) {
                        var blobPDF = new Blob([pdf], {type:'application/pdf'})

                        const url = 'http://123.123.1.123:1234/sendFile';
                        const headers = { 'Content-Type': 'multipart/form-data' };
                        const data = new FormData();
                        
                        data.append('email', '[email protected]');
                        data.append('message', "Hi there!");
                        data.append('file', blobPDF,'Test.pdf');


                        axios.post(url, data,{headers})
                          .then(response => console.log(response.data))
                          .catch(error => console.error(error));
             })})
                
        },

The file looks fine when using the html2pdf.save method. I also tried formatting the resulting pdf as a binary string:

Buffer.from(pdf, "base64");

With that the API responded with an "unprocessable entity" error.

Any help would be appreciated.

Answer 1

I have found a working solution. The problem was that the pdf got mangled in the jspdf step. Giving the outputPDF method the 'blob' parameter fixed it.

The working code is looking as follows:

sendPDF() {
            var opt = {
                image:        { type: 'jpeg', quality: 1 },
                html2canvas:  { scale: 3 },
                jsPDF:        { unit: 'mm', format: 'A5', orientation: 'portrait' }
                };

            var element = document.querySelector('.recipeList')
            
           html2pdf()
             .set(opt)
             .from(element)
             .outputPdf('blob')
             .then(function(pdf) {
                        
                        const url = 'http://123.123.1.123:1234/sendFile';
                        const headers = { 'Content-Type': 'multipart/form-data' };
                        const data = new FormData();
                        
                        data.append('email', '[email protected]');
                        data.append('message', "Hi there!");
                        data.append('file', pdf,'Test.pdf');

                        axios.post(url, data,{headers})
                          .then(response => console.log(response.data))
                          .catch(error => console.error(error));
             })})
                
        }