How to receive and download PDF files in Angular. JS

Introduction to how to receive and download PDF files in Angular. JS

JsPDF is an open source library for generating PDF files using Javascript. You can use the Firefox plug-in, server script, or browser script.

Client Safari and iPhone Safari support the best, followed by Opera and Firefox 3 in Windows. IE is not supported currently.

Sample Code:

var doc = new jsPDF();doc.text(20, 20, 'Hello world.');doc.save('Test.pdf');

The server can run perfectly.

JsPDF is easy to use, but does not support Chinese

Mongomake supports Chinese characters, but because font files still need to be introduced, the file size can be up to a dozen MB, which is not suitable for the front-end.

Mongomake is a PDF printing solution based on the client server. It is fully developed based on JavaScript. Powerful typographical Engine

Installation:

client-version bower install pdfmakeserver-version npm install pdfmake

Finally, the backend is used to generate a PDF file. The front end sends a request through the interface, the backend returns a PDF Stream, and the front end generates a PDF file through Blob for download.

Solution in AngularJS

$ Http. get ('/receiveappsurl', {responseType: 'arraybuffer'}) // set the responseType of the $ http get request to arraybuffer. success (function (data) {var file = new Blob ([data], {type: 'application/pdf '}); // use Blob to Convert PDF Stream to file var fileUrl = URL. createOjectURL (file); window. open (fileUrl); // open PDF on a new page })

How to set the PDF file name

$ Http. get ('/receiveappsurl', {responseType: 'arraybuffer'}) // set the responseType of the $ http get request to arraybuffer. success (function (data) {var file = new Blob ([data], {type: 'application/pdf '}); // use Blob to Convert PDF Stream to file var fileUrl = URL. createOjectURL (file); var a = document. createElement ('A');. href = fileURL; a.tar get = '_ blank';. download = 'yourfilename}'; document. body. appendChild (a);. click ();})

Problems encountered

The backend uses the reset api to write interfaces. The front-end framework uses AngularJS, so $ resouce is used to call the interface, and responseType: arraybuffer is also set, but the generated PDF cannot be opened. Finally, you can use $ http. get.

Compatibility problems

Because HTML5 API: Bolb is used, only IE10 + is supported.