Angular.JS で PDF を受信してダウンロードする方法-jsチュートリアル-php.cn

Angular.JS で PDF を受信してダウンロードする方法

高洛峰

リリース： 2016-12-05 11:13:52

オリジナル

1799 人が閲覧しました

はじめに

jsPDF は、JavaScript 言語を使用して PDF を生成するオープンソースライブラリです。 Firefox プラグイン、サーバーサイドスクリプト、またはブラウザスクリプトで使用できます。

クライアント Safari と iPhone Safari が最もよくサポートされており、Windows では Opera と Firefox 3 がそれに続きます。 IEはまだサポートしていません。

サンプルコード:

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

ログイン後にコピー

サーバー側は完璧に動作します。

jsPDFは使いやすいですが、中国語には対応していません。

pdfmakeは中国語をサポートしていますが、フォントファイルも導入する必要があるため、ファイルサイズが10MBを超える可能性があり、フロントエンドには適していません。

pdfmake はクライアントサーバーベースの PDF 印刷ソリューションであり、完全に JavaScript に基づいて開発されています。強力な植字エンジンを提供します

インストール:

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

ログイン後にコピー

最後に、バックエンドは PDF を生成するために使用され、フロントエンドはインターフェースを通じてリクエストし、バックエンドは PDF ストリームを返し、最後にフロントエンドは Blob を通じて PDF を生成してダウンロードします。。

AngularJSでの解決策

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

ログイン後にコピー

PDFのファイル名を設定する方法

$http.get(&#39;/receivePDFUrl&#39;, {responseType: &#39;arraybuffer&#39;}) // 设置$http get请求的responseType为arraybuffer
 .success(function(data){
  var file = new Blob([data], {type: &#39;application/pdf&#39;}); // 使用Blob将PDF Stream 转换为file
  var fileUrl = URL.createOjectURL(file);
  var a = document.createElement(&#39;a&#39;);
  a.href = fileURL;
  a.target = &#39;_blank&#39;;
  a.download = &#39;yourfilename.pdf&#39;;  
  document.body.appendChild(a);  
   a.click();
 })

ログイン後にコピー

発生した問題

バックエンドはリセットAPIを使用してインターフェイスを作成します。フロントエンドフレームワークは AngularJS を使用するため、$resouce を使用してインターフェイスを呼び出します。 ResponseType: arraybuffer も設定されますが、生成された PDF を開くことはできません。最終的には、$http.get() メソッドを使用するだけです。

互換性の問題

HTML5 API: Bolb を使用しているため、IE10+ のみをサポートできます。