Generate pdf file then upload it to the server

[akelalix]

Hello!

Is it possible to generate the pdf file then upload the file to the file server?

Thank you

[kempsteven]

yes, just use set the :enable-download="false" then use @beforeDownload event, in that function you can manually generate your pdf and get the pdf blob file, once you get that you can now upload that file to the server

sample how to use to here: https://github.com/kempsteven/vue-html2pdf#sample-use-case-of-beforedownload

[akelalix]

Hi @kempsteven thank you for replying.

I will give it a try.

Have a great day!

Stay safe

[akelalix]

Hi @kempsteven

Sorry to bother you again, I have tried the code you have mention and tried uploading the pdf, but when i try downloading the saved file from the server it was unrecognizable

Here is a snippet of my first code

async pdfBeforeDownloaded({ html2pdf, options, pdfContent }) {
        await html2pdf().set(options).from(pdfContent).toPdf().get('pdf').then((pdf) => {

          const formData = new FormData();
          formData.append("pdf", pdf);
          formData.append("_method", "PUT");
          const token = this.$store.state.user.token;
          const config = {
            headers: {
              "Content-type": "multipart/form-data",
              Authorization: `Bearer ${token}`
            }
          };

          axios
            .post(`${process.env.API_ROUTE}/api/test"`, formData, config)`

I also tried converting the pdf blob file as file and upload it thru axios but still no avail

async pdfBeforeDownloaded({ html2pdf, options, pdfContent }) {
        await html2pdf().set(options).from(pdfContent).toPdf().get('pdf').then((pdf) => {

          console.log('pdf.type', pdf.type)
          const file = new File([pdf], 'proposal.pdf', { lastModified: new Date().getTime(), type: pdf.type })

          const formData = new FormData();
          formData.append("file", file);
          formData.append("_method", "PUT");
          const token = this.$store.state.user.token;
          const config = {
            headers: {
              "Content-type": "multipart/form-data",
              Authorization: `Bearer ${token}`
            }
          };

On the php backend, i tried directly saving the file directory to the file storage or base64_decode($request->file('file') before saving it to the file storage

Did i miss something?

Thank you

[akelalix]

Hello @kempsteven

I think i know the problem is. I change formData.append("pdf", pdf); to formData.append("file", btoa(pdf.output()));

It is working now.,

Thank you so much!