下载从 ERP (weclapp) 的 API 调用中收到的 PDF，该 PDF 是用 Javascript 进行 FlateDecoded

Question

I intend to receive a pdf to directly download it from an API call. What I got back, looks like the following:

%PDF-1.4
%����
4 0 obj
<</Filter/FlateDecode/Length 983>>stream
x��Xo�0Է<ѭC�:�H�]`
����ڍ��֕n"$�

What do I need to do to download this? I am working in vuejs/axios as frontend and intend to use express as backend.

I found a similar looking problem here, but without solution: Download PDF file from api using javascript IE9 I implemented the code, but the resulting pop-up simply stays white

Generally it seems to be a pdf with a FlateDecode-filter.

Answer 1

I have this utility to download files from an API url.

import axios from "axios";

/**
 * utility to download a File from an api url.
 * @param config (optional) config for axios
 */
export default function download(url, config) {
  return axios.get<Blob>(url, {
    ...config,
    responseType: "blob"
  }).then(response => {
    // get filename from content-disposition header
    const contentDisposition = response.headers["content-disposition"];
    const fileName = contentDisposition.match(/\bfilename=([^;]*)/)[1].trim();
    
    //"save" file to hard disk
    const link = document.createElement("a");
    link.href = URL.createObjectURL(response.data);
    link.setAttribute("download", fileName);
    document.body.appendChild(link);
    link.click();

    // cleanup
    setTimeout(() => {
      link.parentNode.removeChild(link);
    }, 3000);

    return response;
  })
}

Answer 2

So I found this working answer in this thread: https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

It seems like there is a ton of different ways to approach this.

  await this.$axios( this.api_url, 
    {method: 'GET', responseType: 'blob', headers: {"AuthenticationToken": this.api_token} }
    ).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    // works in IE11
    if (typeof window.navigator.msSaveBlob === 'function') {
      window.navigator.msSaveBlob(
        response.data,
        `${filename}.pdf`
      );
    } else {
      link.setAttribute('download', `filename.pdf`);
      document.body.appendChild(link);
      link.click();
    }
});