Не получается сохранить pdf на стороне клиента

#javascript #php #pdf #blob #mpdf

Приходит ответ с сервера. в ответе pdf-файл (содержание обрезанное):



Формирую файл на сервере (Laravel):

public function getTaskOrderLabel (Request $request) {

  $mpdf = new \Mpdf\Mpdf($props);
  $mpdf->showImageErrors = true;

  $props = [
    //'debug' => true,
    'tempDir' => '/home/mpdf',
    'format' => [100,20],
    'margin_left' => 0,
    'margin_right' => 0,
    'margin_top' => 0,
    'margin_bottom' => 0,
    'margin_header' => 0,
    'margin_footer' => 0,
  ];

  foreach ($ptfe as $el) {

    // Наполняем данными
    // ...
    // Формируем стили

    $mpdf->WriteHTML($style, \Mpdf\HTMLParserMode::HEADER_CSS);
    $mpdf->WriteHTML($page, \Mpdf\HTMLParserMode::HTML_BODY);
    $mpdf->AddPage();
  }

  $mpdf->Output();

}


Сохраняю файл:

.then(response => {
  console.log(response.data);
  let file = new Blob([response.data], {type: 'application/pdf'});
  let fileURL = URL.createObjectURL(file);
  window.open(fileURL);
 })


Файл создаётся и сохраняется, но в нём нет данных, но есть количество страниц в документе.
В чём проблема?
    

Ответы

Ответ 1

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

Используйте параметр responseType для того чтобы указать в какой формат axios должен
конвертировать ваш ответ от сервера. Ниже я привёл 2 варианта конвертации base64 в файл.

Вариант 1) responseType: 'blob' - axios сам создаст Blob файл и запишет его в переменную
response.data.

Вариант 2) responseType: 'arraybuffer' - axios преобразует ответ в бинарные данные,
объект ArrayBuffer и запишет его в переменную response.data.

// use responseType: 'blob'
axios({
  url: 'http://localhost/download_pdf',
  method: 'GET',
  responseType: 'blob', // <--
}).then(response => {
  const blob_file = response.data;
  const file_url = URL.createObjectURL(blob_file);
  window.open(file_url); // open file in new tab
});

// or use responseType: 'arraybuffer'
axios({
  url: 'http://localhost/download_pdf',
  method: 'GET',
  responseType: 'arraybuffer', // <--
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');

  link.href = url;
  link.setAttribute('download', 'custom_filename.pdf'); // set custom file name
  document.body.appendChild(link);

  link.click(); // force download file without open new tab
});


// backend on the Laravel (for example)
// file web.php
Route::get('/download_pdf', function () {
  $filename = 'labels.pdf';
  $pathToFile = public_path().'/'.$filename;

  return Response::make(file_get_contents($pathToFile), 200, [
    'Content-Type' => 'application/pdf',
    'Content-Disposition' => 'inline; filename="'.$filename.'"'
  ]);
});


// несколько ссылок с простыми pdf для тренировок
// http://www.orimi.com/pdf-test.pdf
// http://www.pdf995.com/samples/pdf.pdf
// https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
// http://www.africau.edu/images/default/sample.pdf


Подробнее.