Search code examples
javascriptpdfdownloadstreamblob

Downloading PDF from API via Javascript

i am using vue.js and found some good examples how to realize this.

Currently my API is returning a 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"'
        )
    );

Downloading the Content via Postman works well.

I managed the JS-part like this:

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

and:

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

The download works fine but the file downloaded via js seems to be corruped (PDF wont show): enter image description here

The green marked text is the content of the working pdf.

I think something is messed up with the charset, but i ran out of Ideas :(

Hopefully someone can give me a hint - It drives me nuts :)

Best regards - Alex

Solution

  • transferring the pdf base64 encoded and converting the string into an blob finally worked:

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