AngularJSを使ってExcelファイルをダウンロードする機能を実装する方法

この記事では主に、http リクエストに基づいて php によって生成された Excel ファイルをダウンロードする AngularJS の機能を紹介します。AngularJS の http リクエストとファイルのダウンロード、およびその他の関連操作スキルをサンプルの形式で分析します。この記事の例では、http リクエストは php で生成された Excel ファイルをダウンロードする機能を実装しています。参考までに皆さんと共有してください。詳細は次のとおりです。

PHPExcel プラグインを使用している学生は全員、Excel をエクスポートすると、生成されたコンテンツのコンテンツ タイプが直接変更され、コンテンツがファイルとしてダウンロードされることを知っています。 、クリックしてダウンロードするために、ページに URL が必要です。

それでは、Excelを生成するときにリクエストパラメータがある場合、JS httpリクエストを通じてのみリクエストできるのですが、現時点でそれをダウンロードするにはどうすればよいですか？

いくつか調べた結果、次のような方法がありました:

1. Angularjs はダウンロードをシミュレートするタグを作成します

// 创建a标签模拟下载
function exportExcel(params, filename) {
  return $http({
    url: '/api/exportExcel',
    method: "POST",
    headers: {
      'Content-type': 'application/json'
    },
    params: params,
    responseType: 'arraybuffer'
  }).success(function (data) {
    var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    var objectUrl = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.setAttribute('style', 'display:none');
    a.setAttribute('href', objectUrl);
    a.setAttribute('download', filename);
    a.click();
    URL.revokeObjectURL(objectUrl);
  });
}

この方法では、送信が xls、つまり Excel5 ファイルの場合、 type は

application/vnd.ms-excel

または application/x-excel に設定する必要があります。

2. js はリクエストパラメータから URL を生成し、

// 生成下载url
$scope.data.down_url = "../c_potential/get_excel?end_time="+$scope.end_date+"&liable="+liable+"&nickname="+$scope.data.nickname+"&province="+$scope.data.province_cur+"&start_time="+$scope.start_date;

タグを作成し、その URL を a タグにバインドします。このメソッドはパラメータが少ない状況に適しており、データは唯一の欠点は、パラメータを生成して URL に書き込むためのボタンと、ダウンロードするための 2 つのボタンを設定できることです。エクセル。ユーザーは 2 回操作しますが、実際に発生する http リクエストは 1 回だけであり、パフォーマンスには影響しません。

3. まず生成してからダウンロードします 3 番目の方法は 2 番目の方法と似ており、最初に Excel ファイルを生成し、サーバーに保存してからダウンロードします。ディスク IO が必要なため、パフォーマンスは比較的低くなります。この方法は推奨されません。方法として記録されています。

angularjs のシミュレートされたダウンロード方法が最も便利ですが、エラーが発生する可能性があります。2 番目の方法が最も安全です。

上記は私があなたのためにまとめたものです。

関連記事:

vueでインデックスファイルをコンパイル、パッケージ化、表示する方法

vueでJadeテンプレートを使用する方法

Angularのコンポーネントにテンプレートを渡す

以上がAngularJSを使ってExcelファイルをダウンロードする機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。