web-dev-qa-db-ja.com

PDF AJAX呼び出しを使用して

AJAX呼び出しを使用して、サーバー側で作成され、Webストリームとしてクライアント側に渡される）PDFを表示しようとしています。私のコードを以下に示します。

jQuery.ajax({
    type: "POST",
    processData: false,
    url: "aaaa.p?name=pdf",
    data: inputxml,
    contentType: "application/xml; charset=utf-8",
    success: function(data)
    {
      // here the data is the PDF stream i'm getting from the server side. 

    }
});

「inputxml」には、サーバーがPDFを作成するための入力パラメーターが含まれています。 PDFストリーム。==の成功関数内のブラウザでPDFファイルを開く方法はありますか？ AJAXページ送信なしで呼び出しますか？サーバー側ではPDFは物理的に生成されません。ご協力に感謝します。..

jqueryajaxpdf
13
Knissanka

なぜAJAX経由でロードするのですか？必要なときに生成したIFRAMEにロードしてみませんか。標準のブラウザプラグインは、そのiframe内に表示します。

$('#link').click(function(e) {
    e.preventDefault(); // if you have a URL in the link
    jQuery.ajax({
        type: "POST",
        processData: false,
        url: "aaaa.p?name=pdf",
        data: inputxml,
        contentType: "application/xml; charset=utf-8",
        success: function(data)
        {
            var iframe = $('<iframe>');
            iframe.attr('src','/pdf/yourpdf.pdf?options=first&second=here');
            $('#targetDiv').append(iframe);
        }
    });
});
16
Zim84

この問題に対処する私の方法は次のとおりです。このpdfmakeファイルの50行目に基づいています（ https://github.com/bpampuch/pdfmake/blob/master/src/browser-extensions/pdfMake.js ）。

  1. pdfストリームがあると仮定して、base64に変換し、AJAXにエコーバックします。

    $pdfString = $mpdf->Output('', 'S');
$pdfBase64 = base64_encode($pdfString);
echo 'data:application/pdf;base64,' . $pdfBase64;

  2. ここに私のAJAXコード。データを受信すると、新しいウィンドウが開き、urlがbase64内挿データに置き換えられます。

    var ajaxRequest = $.ajax({
    url: "php/generate-pdf/print-control.php",
    data: '',
    cache: false,
    contentType: 'application/json',
    processData: false,
    type: 'POST'

});
$.when(ajaxRequest).done(function (ajaxValue) {
    var win = window.open('', '_blank');
    win.location.href = ajaxValue;
});

    このメソッドの欠点は、アドレスバーにbase64文字列を取得することです。

6
andrzej.szmukala

これに出くわした人のために。ここにaxiosを使用した例があります

  1. responseTypeは 'arrayBuffer'でなければなりません
  2. 応答からBlobオブジェクトを作成します

  3. iframeにロードできるBlobから「オブジェクトURL」を作成します

        axios({
        url: `path/to/pdf`,
        method: "GET",
        responseType: 'arraybuffer'
    }).then((response) => {
        let blob = new Blob([response.data], { type: response.headers['content-type'] } );
        let url = window.URL.createObjectURL(blob);

        $('#frame').attr('src',url);
    });
1
Chris Rocco

一時URLを生成して、PDF呼び出しに送信する代わりに、サーバーに保存されているAJAXファイルにアクセスします。生成されたURLを返すだけです。次に、URLを受け取ったら、たとえばwindow.location =ブラウザをダウンロードにリダイレクトします。

生成されたファイルに正しいヘッダーが設定されていることを確認してください（Content-Disposition: attachmentなど）、すべてが正常である必要があります。

編集： ただし、通常の（非JavaScript）リンクを使用してファイルを生成およびダウンロードすることもできます。ただし、AJAXを使用して実行すると、ファイルの生成中に特定のアニメーションなどをユーザーに表示できます。

0
lethal-guitar