Как передать данные через ajax в php обработчик, который сформирует pdf и скачается файл?

Question

[nikkon82]

День добрый!

Подскажите как правильно, при нажатии на кнопку на сайте, передать данные через ajax в php файл, в котором произведутся все необходимые расчеты и создастся + скачается pdf?

Есть форма на сайте, при нажатии на кнопку Скачать pdf - данные уходят через:

$.ajax({
			type: "POST",
			url: "../report.php",
			dataType: "json",
			cache: false,
			contentType: false,
			processData: false,			
			data: formData,
			success: function(data, respond, textStatus, jqXHR){
				console.log(respond);
			},
			error: function(jqXHR, textStatus, errorThrown) {
				console.log('Ошибка: ' + textStatus + ' | ' + errorThrown);
			}

Там происходят разные расчеты, формируются переменные - здесь все работало норм, пока передача результатов уходила на почту.

Сейчас надо, чтоб все эти результирующие данные не на почту отправлялись, а скачивались в формате pdf - т.е. при нажатии на кнопку - скачивался pdf отчет.

PDF формируется через FPDF - здесь тоже шаблон собран, все работает отдельно от данных )))

Соединяя два обработчика - ничего не происходит, точнее не формируется pdf (при обращении напрямую к файлу report.php (который раньше до получения данных формировал pdf) выдает на странице просто "null"

Вот часть кода:

<?php

/* Здесь проверяется существование переменных */
if (isset($_POST['a'])) {$a = $_POST['a'];}
if (isset($_POST['b'])) {$b= $_POST['b'];}
..........
/**
Здесь идут всякие расчеты и переменные
**/
......
 
echo json_encode($arResult);

require_once( "fpdf/fpdf.php" );

/**
  Создаем страницу
**/
$pdf = new FPDF( 'P', 'mm', 'A4' );
$pdf->AddFont('Calibri','','calibri.php');
$pdf->AddFont('Calibri-Bold','','calibrib.php');
$pdf->AddFont('Calibri-Italic','','calibrii.php');
$pdf->SetTextColor( $textColour[0], $textColour[1], $textColour[2] );
$pdf->AddPage();
.........

/**
  Создаем форму с Расчетными данными
**/
.........
/***
  Выводим PDF
***/

$pdf->Output( "report.pdf", "I" );

?>

Answer 1

[Александр]

Думаю как то так должно работать:

$.ajax({
  ...
  success: function(data) {
    var file=document.createElement('a');
    file.href=window.URL.createObjectURL(new Blob([data],{type: "application/pdf"}));
    file.download="Report.pdf";
    file.click();
  }
});

или

$.ajax({
  ...
  success: function(data) {
     chrome.downloads.download({
        url : URL.createObjectURL(new Blob([data],{type: "application/pdf"})),
        filename : "Report.pdf",
        conflictAction : 'uniquify'
    });
  }
});

думаю суть понятна, а type и имя файла можно из заголовков выдернуть.

Comments

[nikkon82]

pdf формируется из php файла - report.php - но в него сначала надо еще данные передать

[Александр]

ну ajax передает данные, и принимает в ответ данные, но чтобы их "загрузить" в файл - предется сформировать внутри браузера в загружабельный объект Blob() и его уже и сохранить в файл.

Вообще это общий метод для сохранения данных из JS браузера клиента в локальный файл.

[nikkon82]

Александр, не работает так, как нужно - скачивается файл report.pdf который даже не открывается (ну это и понятно)
Надо не скачать файл, которого нет, а передать данные в report.php - которые будут обработаны и подставлены в нужные места (как переменные) - и по итогу по сути надо перейти на страницу report.php на которой и будет php представлен в виде pdf (но в итоге он должен просто скачаться - вместо $pdf->Output( "report.pdf", "I" ); пропишется $pdf->Output( "report.pdf", "D" );

[Александр]

Значит надо эксперементировать, думать либо в стонону Base64 передачи, либо возвращать ссылку на временный файл, который и скачивать.

Answer 2

[egor_nullptr]

Вам потребуется небольшой плагин для jQuery - binarytransport

Код плагина

(function($, undefined) {
    "use strict";

    // use this transport for "binary" data type
    $.ajaxTransport("+binary", function(options, originalOptions, jqXHR) {
        // check for conditions and support for blob / arraybuffer response type
        if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
            return {
                // create new XMLHttpRequest
                send: function(headers, callback) {
                    // setup all variables
                    var xhr = new XMLHttpRequest(),
                        url = options.url,
                        type = options.type,
                        async = options.async || true,
                        // blob or arraybuffer. Default is blob
                        dataType = options.responseType || "blob",
                        data = options.data || null,
                        username = options.username || null,
                        password = options.password || null;

                    xhr.addEventListener('load', function() {
                        var data = {};
                        data[options.dataType] = xhr.response;
                        // make callback and send data
                        callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                    });
                    xhr.addEventListener('error', function() {
                        var data = {};
                        data[options.dataType] = xhr.response;
                        // make callback and send data
                        callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                    });

                    xhr.open(type, url, async, username, password);

                    // setup custom headers
                    for (var i in headers) {
                        xhr.setRequestHeader(i, headers[i]);
                    }

                    xhr.responseType = dataType;
                    xhr.send(data);
                },
                abort: function() {}
            };
        }
    });
})(window.jQuery);

Код отправки данных будет выглядеть так:

$.ajax({
            type: "POST",
            url: "../report.php",
            data: formData,
            dataType: 'binary',
            processData: false,
            success: function (resp, status, xhr) {
                var disposition = xhr.getResponseHeader('Content-Disposition');
                var filename = disposition.substring(disposition.indexOf('filename=') + 'filename='.length).replace(/['"]/g, '');
                var type = xhr.getResponseHeader('Content-Type');
                var blob = new Blob([resp], {type: type});
                var download_url = (window.URL || window.webkitURL).createObjectURL(blob);
                var a = document.createElement("a");
                a.href = download_url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
            },
            error: function (xhr) {
                ...
            }
        });

Answer 3

[alex-1917]

Отправляешь данные arr на свой обработчик,
в нем формируешь тело pdf и отправляешь на фронт путь к файлу,
на фронте вставляешь путь к файлу в скрытую ссылку и кликаешь скриптом на эту ссылку,
профит!

<a class="rez" style="display:none" download="" href="" target="_blank"></a>

jQuery.ajax({
   type: "POST",
   url: "report.php",
   data: arr,
   success: function(data){
      var result = jQuery.parseJSON( data );
      jQuery('.rez').attr('href', result.doc);
      jQuery('.rez')[0].click();
   }
});

Обработчик:

$uniqid = uniqid();
$pdf = new PDF();
........
$path = "pdf/".$uniqid.".pdf";
$pdf->Output($path,'F');
$doc = 'pdf/'.$uniqid.'.pdf';
echo json_encode(array('doc' => $doc ));