Heim > Web-Frontend > js-Tutorial > Hauptteil

So empfangen und laden Sie PDFs in Angular.JS herunter

高洛峰
Freigeben: 2016-12-05 11:13:52
Original
1775 Leute haben es durchsucht

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');
Nach dem Login kopieren

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
Nach dem Login kopieren

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
 })
Nach dem Login kopieren

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();
 })
Nach dem Login kopieren

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.


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage