ホームページ > 記事 > ウェブフロントエンド > Angular.JS で PDF を受信してダウンロードする方法
はじめに
jsPDF は、JavaScript 言語を使用して PDF を生成するオープンソース ライブラリです。 Firefox プラグイン、サーバーサイド スクリプト、またはブラウザ スクリプトで使用できます。
クライアント Safari と iPhone Safari が最もよくサポートされており、Windows では Opera と Firefox 3 がそれに続きます。 IEはまだサポートしていません。
サンプルコード:
var doc = new jsPDF(); doc.text(20, 20, 'Hello world.'); doc.save('Test.pdf');
サーバー側は完璧に動作します。
jsPDFは使いやすいですが、中国語には対応していません。
pdfmakeは中国語をサポートしていますが、フォントファイルも導入する必要があるため、ファイルサイズが10MBを超える可能性があり、フロントエンドには適していません。
pdfmake はクライアントサーバーベースの PDF 印刷ソリューションであり、完全に JavaScript に基づいて開発されています。強力な植字エンジンを提供します
インストール:
client-version bower install pdfmake server-version npm install pdfmake
最後に、バックエンドは PDF を生成するために使用され、フロントエンドはインターフェースを通じてリクエストし、バックエンドは PDF ストリームを返し、最後にフロントエンドは Blob を通じて PDF を生成してダウンロードします。 。
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 })
PDFのファイル名を設定する方法
$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(); })
発生した問題
バックエンドはリセットAPIを使用してインターフェイスを作成します。フロントエンド フレームワークは AngularJS を使用するため、$resouce を使用してインターフェイスを呼び出します。 ResponseType: arraybuffer も設定されますが、生成された PDF を開くことはできません。最終的には、$http.get() メソッドを使用するだけです。
互換性の問題
HTML5 API: Bolb を使用しているため、IE10+ のみをサポートできます。