So empfangen und laden Sie PDFs in Angular.JS herunter

Einführung

jsPDF ist eine Open-Source-Bibliothek, die die Javascript-Sprache zum Generieren von PDF-Dateien verwendet. Sie können es in Firefox-Plug-Ins, serverseitigen Skripten oder Browser-Skripten verwenden.

Client Safari und iPhone Safari werden am besten unterstützt, gefolgt von Opera und Firefox 3 unter Windows. IE unterstützt es noch nicht.

Beispielcode:

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

Die Serverseite kann einwandfrei laufen.

jsPDF ist einfach zu verwenden, unterstützt jedoch kein Chinesisch.

pdfmake unterstützt Chinesisch. Da jedoch auch Schriftartdateien eingeführt werden müssen, kann die Dateigröße mehr als zehn MB erreichen Nicht für den Frontbereich geeignet.

pdfmake ist eine Client-Server-basierte PDF-Drucklösung, die vollständig auf JavaScript basiert. Stellen Sie eine leistungsstarke Satz-Engine bereit

Installation:

client-version bower install pdfmake
server-version npm install pdfmake

Schließlich wird das Backend zum Generieren von PDF verwendet, das Frontend fordert über die Schnittstelle an und der Back-End-Return-PDF-Stream, und schließlich generiert das Front-End PDF über Blob und lädt es herunter.

Lösung in AngularJS

$http.get('/receivePDFUrl', {responseType: 'arraybuffer'}) // 设置$http get请求的responseType为arraybuffer
 .success(function(data){
  var file = new Blob([data], {type: 'application/pdf'}); // 使用Blob将PDF Stream 转换为file
  var fileUrl = URL.createOjectURL(file);
  window.open(fileUrl); // 在新的页面中打开PDF
 })

So legen Sie den Dateinamen von PDF fest

$http.get('/receivePDFUrl', {responseType: 'arraybuffer'}) // 设置$http get请求的responseType为arraybuffer
 .success(function(data){
  var file = new Blob([data], {type: 'application/pdf'}); // 使用Blob将PDF Stream 转换为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();
 })

Aufgetretene Probleme

Das Backend verwendet die Reset-API, um die Schnittstelle zu schreiben. Das Front-End-Framework verwendet AngularJS, daher wird $resource zum Aufrufen der Schnittstelle verwendet. ResponseType:arraybuffer ist ebenfalls festgelegt, das generierte PDF kann jedoch nicht geöffnet werden. Am Ende verwenden Sie einfach die Methode $http.get().

Kompatibilitätsprobleme

Aufgrund der Verwendung der HTML5-API: Bolb kann nur IE10+ unterstützt werden.