web-dev-qa-db-ja.com

jquery ajaxを使用してPDFファイルをダウンロードする

Jquery ajax応答のPDFファイルをダウンロードしたい。 Ajax応答には、pdfファイルデータが含まれます。私はこれを試しました ソリューション 。以下にコードを示しますが、常に空のPDFを取得します。

$(document).on('click', '.download-ss-btn', function () {

    $.ajax({
        type: "POST",
        url: 'http://127.0.0.1:8080/utils/json/pdfGen',
        data: {
            data: JSON.stringify(jsonData)
        }

    }).done(function (data) {
        var blob = new Blob([data]);
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "Sample.pdf";
        link.click();
    });


});
javascriptjqueryajaxpdf
31
azhar

jQueryには、いくつかのHTML5 XHR v2機能をまだ実装していないため、AJAXリクエストを使用したバイナリデータの読み込みに関する問題があります。こちら enhancement request およびthis ディスカッション

そのため、次の2つのソリューションのいずれかがあります。

最初のソリューション、JQueryを放棄し、XMLHTTPRequestを使用します

ネイティブのHTMLHTTPRequestを使用して、必要なことを行うコードを以下に示します

  var req = new XMLHttpRequest();
  req.open("GET", "/file.pdf", true);
  req.responseType = "blob";

  req.onload = function (event) {
    var blob = req.response;
    console.log(blob.size);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="Dossier_" + new Date() + ".pdf";
    link.click();
  };

  req.send();

2番目の解決策は、jquery-ajax-nativeプラグインを使用します

プラグインは here にあり、JQueryにはないXHR V2機能に使用できます。使用方法のサンプルコードを次に示します。

$.ajax({
  dataType: 'native',
  url: "/file.pdf",
  xhrFields: {
    responseType: 'blob'
  },
  success: function(blob){
    console.log(blob.size);
      var link=document.createElement('a');
      link.href=window.URL.createObjectURL(blob);
      link.download="Dossier_" + new Date() + ".pdf";
      link.click();
  }
});
65
Hisham

私は初心者で、コードの大部分はGoogle検索からのものです。以下のコードを使用してPDFをダウンロードしました（試行およびエラープレイ）。上記のコードのヒント（xhrFields）をありがとう。

$.ajax({
            cache: false,
            type: 'POST',
            url: 'yourURL'
            contentType: false,
            processData: false,
            data: yourdata,
             //xhrFields is what did the trick to read the blob to pdf
            xhrFields: {
                responseType: 'blob'
            },
            success: function (response, status, xhr) {

                var filename = "";                   
                var disposition = xhr.getResponseHeader('Content-Disposition');

                 if (disposition) {
                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                    var matches = filenameRegex.exec(disposition);
                    if (matches !== null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                } 
                var linkelem = document.createElement('a');
                try {
                                           var blob = new Blob([response], { type: 'application/octet-stream' });                        

                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        //   IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        var URL = window.URL || window.webkitURL;
                        var downloadUrl = URL.createObjectURL(blob);

                        if (filename) { 
                            // use HTML5 a[download] attribute to specify filename
                            var a = document.createElement("a");

                            // safari doesn't support this yet
                            if (typeof a.download === 'undefined') {
                                window.location = downloadUrl;
                            } else {
                                a.href = downloadUrl;
                                a.download = filename;
                                document.body.appendChild(a);
                                a.target = "_blank";
                                a.click();
                            }
                        } else {
                            window.location = downloadUrl;
                        }
                    }   

                } catch (ex) {
                    console.log(ex);
                } 
            }
        });
16
anonymous