#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 Подробнее.
