Просмотр PDF с использованием вызова AJAX

Я пытаюсь отобразить PDF файл (который создается на стороне сервера и переходить на клиентскую сторону в виде веб-потока) через вызов AJAX. Мой код приведен ниже:

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 также не создается физически. Высоко цените вашу помощь....

Ответ 1

Зачем вы загружаете его через 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);
        }
    });
});

Ответ 2

Вот мой способ справиться с этой проблемой. Он основан на строке 50 этого файла pdfmake (https://github.com/bpampuch/pdfmake/blob/master/src/browser-extensions/pdfMake.js).

Предполагая, что у вас есть поток в формате pdf, я конвертирую его в base64 и возвращаю обратно в AJAX:
```
$pdfString = $mpdf->Output('', 'S');
$pdfBase64 = base64_encode($pdfString);
echo 'data:application/pdf;base64,' . $pdfBase64;
```
Вот мой код 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 в адресной строке.

Ответ 3

Вы можете создать временный URL-адрес для доступа к файлу PDF, хранящемуся на сервере, вместо отправки его обратно на вызов AJAX. Просто передайте сгенерированный URL-адрес клиенту. Затем, когда вы получаете URL-адрес, вы можете, например, сделать window.location =, чтобы перенаправить браузер на загрузку.

Убедитесь, что для созданного файла установлены правильные заголовки (Content-Disposition: attachment и т.д.), и все должно быть в порядке.

Изменить: Хотя вы могли бы просто использовать регулярную (не JavaScript) ссылку для создания и загрузки файла. Но выполнение этого с помощью AJAX позволяет пользователю показывать определенную анимацию и т.д., Пока файл создается.

Ответ 4

Для всех, кто спотыкается об этом. Вот пример использования axios

responseType должен быть "arrayBuffer"
создать объект Blob из ответа

создать "URL-адрес объекта" из блоба, который вы можете загрузить в iframe

    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);
    });