Загрузка PDF из API через Javascript - PullRequest
Новая
       39

Загрузка PDF из API через Javascript

0 голосов
/ 15 декабря 2018

Я использую vue.js и нашел несколько хороших примеров, как это реализовать.

В настоящее время мой API возвращает test-pdf: 

    $snappy = App::make('snappy.pdf');

    $html = '<h1>Bill</h1><p>You owe me money, dude.</p>';

    return Response(
        $snappy->getOutputFromHtml($html),
        200,
        array(
            'Content-Type'          => 'application/pdf',
            'Content-Disposition'   => 'attachment; filename="file.pdf"'
        )
    );

Загрузка контента через Почтальон работаетхорошо.

Я управлял JS-частью следующим образом: 

  export const InvoiceService = {
  get(slug) {
    return ApiService.get("invoice", slug);
  },
  downloadPdf(slug) {
    return ApiService.get(`pdf/invoice`, slug, {
      responseType: 'arraybuffer'
    });
  }
};

и: 

InvoiceService.downloadPdf(invoiceId)
        .then(({ data }) => {
          let blob = new Blob([data], {
            type: "application/pdf"
          });
          FileSaver.saveAs(blob, "invoice.pdf");
        })
        .catch(error => {
          throw new Error(error);
        });

Загрузка работает нормально, но файл, загруженный через js, кажется,поврежден (PDF не будет отображаться): enter image description here

Текст, помеченный зеленым цветом, является содержимым рабочего файла.

Я думаю, что-то напутано с кодировкой,но у меня кончились идеи: (

Надеюсь, кто-нибудь может дать мне подсказку - это сводит меня с ума:)

С наилучшими пожеланиями - Алекс

1 Ответ

0 голосов
/ 18 декабря 2018

Передача PDF в кодировке base64 и преобразование строки в большой двоичный объект наконец-то сработало:

PHP: 

$pdf = App::make('snappy.pdf.wrapper');
$pdf->loadHTML('<h1>Test</h1>');
$pdf->setOption('encoding', 'UTF-8');
return base64_encode($pdf->output());

JS: 

var byteCharacters = atob(data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: "application/pdf" });

FileSaver.saveAs(blob, "invoice.pdf");
...