通过Javascript从API下载PDF

Question

我正在使用vue.js，并找到了一些很好的示例来实现这一目标。

当前我的API返回的是test-pdf：

describe('angularjs homepage', function() {
  it('should greet the named user', async function() {
    await browser.get('http://www.angularjs.org');
    await element(by.model('yourName')).sendKeys('Julie');
  });

通过邮递员下载内容效果很好。

我这样管理JS部分：

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

和：

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

下载工作正常，但通过js下载的文件似乎已损坏（PDF不会显示）：

绿色标记的文本是工作pdf的内容。

我认为字符集有些混乱，但是我用尽了Ideas：（

希望有人能给我一个提示-它使我发疯：）

最诚挚的问候-亚历克斯

Answer 1

传输编码的pdf base64并将字符串转换为blob终于可以了：

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