通过 Javascript 从 API 下载 PDF

我正在使用 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"'
        )
    );

通过 Postman 下载内容效果很好。

我这样管理 JS 部分：

  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):

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

我认为字符集有些混乱，但我已经没有想法了:(

希望有人能给我一个提示 - 这让我发疯:)

最好的问候 - 亚历克斯

您可以将 Axios 与responseType: 'blob'

// Function that downloads PDF
function download(data) {
  const url = URL.createObjectURL(data);
  const a = document.createElement('a');
  a.download = 'test.pdf';
  a.href = url;
  a.target = '_self';

  a.click();

  setTimeout(function () {
    // For Firefox it is necessary to delay revoking the ObjectURL
    a.remove();
    URL.revokeObjectURL(url);
  }, 100);
}

// Get data from the API
const response = await axios.get('URL', {
   responseType: 'blob', // THIS is very important, because we need Blob object in order to download PDF
});

// Invoke download function
download(response);

/////////////// Your response.data will look like this: