CODEWITHSUNDEEP
htmlnode.jsangularpdf
Seane
Seane

Reputation: 41

How would you create a downloadable pdf in a client side app?

One of our requirements for an admin tool is to create a form that can be filled and translated to a downloadable pdf file. (A terms and condition with blank input fields to be exact).

I did some googling and tried creating a form in html and css and converted it into a canvas using the html2canvas package. Then I used the jspdf package to convert it into a pdf file. The problem is that I cannot get it to fit and resize accordingly to an a4 format with correct margins. I'm sure I can get to a somewhat working solution if I spend some time on it.

However, my real question is how would you guys solution this? Is there a 3rd party app/service that does this exact thing? Or would you do all this in the server side? Our current app is using angular 7 with firebase as our backend.

Cheers!

Upvotes: 0

Views: 1025

Answers (2)

Kurt Cooney
Kurt Cooney

Reputation: 31

I was able to use the npm package pdfmake to create a dynamic pdf based on user information the user provided while interacting with my form. (I was using React) It opened the pdf in a new tab and the user is able to save the pdf. In another application (still React),

I used the same package to create a receipt so you can customize the size of the "page". We created the pdf and used the getBase64() method and sent the pdf as an email attachement.

Upvotes: 2

Arvind
Arvind

Reputation: 70

 My service function:
 getEvidenceFile(id: number, getFileContent: boolean) {

 return this.http.get(environment.baseUrl + ‘upload’ + ‘/’ + id , {responseType: ‘blob’ as ‘json’})
 .map(res => res);
 }

 My component function called from the selected item of a FileDownload…
 FileDownload(event: any) {

 // const blob = await this.callService.getEvidenceFile(event.target.value, true);
 // const url = window.URL.createObjectURL(blob);

 this.callService.getEvidenceFile(event.target.value, true).subscribe(data => {

 var binaryData = [];
 binaryData.push(data);
 var downloadLink = document.createElement(‘a’);
 downloadLink.href = window.URL.createObjectURL(new Blob(binaryData));
 document.body.appendChild(downloadLink);
 downloadLink.click();

 });
 }

Upvotes: 0

Related Questions