How to receive and download Pdf_angularjs in Angular.js

Introduced

Jspdf is an open source library that generates PDFs using the JavaScript language. You can use it in Firefox plug-ins, server-side scripts, or browser scripts.

The client Safari and IPhone Safari support the best, followed by opera and Windows Firefox 3, and so on. IE temporarily does not support.

Sample code:

var doc = new Jspdf ();
Doc.text ("Hello World");
Doc.save (' test.pdf ');

Server-side can run perfectly.

Jspdf is easy to use but does not support Chinese

Pdfmake support Chinese, but because the need to introduce font files, resulting in a file size of more than 10 m, not suitable for the front-end.

Pdfmake is a PDF printing solution based on client server, completely based on JavaScript development. Provides a powerful typesetting engine

Installation:

Client-version Bower Install Pdfmake
server-version npm Install

Finally, the back-end generated PDF, the front-end through the interface request, back-end to return the PDF Stream, the last front-end through the BLOB generated PDF and implementation of the download.

The solution in the Angularjs

$http. Get ('/receivepdfurl ', {responsetype: ' Arraybuffer '})//Set Responsetype for $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 in new page
 })

How to set the file name of a PDF

$http. Get ('/receivepdfurl ', {responsetype: ' Arraybuffer '})//Set Responsetype for $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 '); 
  A.href = FileURL; 
  A.target = ' _blank '; 
  A.download = ' yourfilename.pdf ';   
  Document.body.appendChild (a);   
   A.click ();
 })

Problems encountered

The backend uses the Reset API to write the interface. The front-end framework uses the ANGULARJS, so the $resouce is used to invoke the interface, also set responseType：arraybuffer , but the generated PDF is not open. The last thing is $http.get() to use the way on it.

Compatibility issues

Because of the use of HTML5 Api:bolb, only ie10+ can be supported.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone to learn or use angular.js can help, if you have questions you can message exchange.