Question

我正在实现获取pdf文件并下载的javascript代码当用户单击按钮时。但是当我下载pdf文件时。好像是格式错误。

这是我的代码

 fetchPdfDownload = (fileName) => {
    return axios.get(`/api/pdf`, {
      params: {
        'file': fileName,
      },
    })
  }
async onClick () {
    try {
      let response = await this.fetchPdfDownload(this.props.symbol)

      const url = window.URL.createObjectURL(new Blob([response.data], {type: "application/pdf; encoding=UTF-8"}));
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', 'file.pdf')
      document.body.appendChild(link)
      link.click()
    } catch (e) {
      console.log(e)
    }
  }

我尝试在这里找到方法。我尝试将responseType更改为“ blob”和“ arraybuffer”，但似乎没有任何效果。 PDF似乎与服务器pdf的页面相同，但没有内容。

以下是标头示例

 content-disposition: attachment; filename=example.pdf; filename*=UTF-8''example.pdf 
 content-length: 592283 
 content-type: application/pdf 
 date: Thu, 30 Aug 2018 17:43:06 GMT 
 server: Kestrel 
 x-powered-by: ASP.NET

任何人都知道发生了什么事。

Answer 1

我不确定您为什么不使用直接传递给axios的地址来构造，但是我认为axios可能会以错误的格式返回您的PDF，从而使Blob()行为不当。

我不知道如何使axios将东西变成Buffer，但是我确实知道如何使用fetch进行操作。请考虑以下内容：

async function loadPDF(fileName) {
    const res = await fetch(`/api/pdf?file=${fileName}`);
    const buff = await res.blob();
    const url = window.URL.createObjectURL(buff);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "file.pdf");
    document.body.appendChild(link);
    link.click();
}

使用axios可以处理我尝试过的PDF：

async function loadPDF(fileName) {
    const blob = await axios.get(`/api/pdf?file=${fileName}`, {
        responseType: "blob"
    });
    const url = window.URL.createObjectURL(blob.data);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "file.pdf");
    document.body.appendChild(link);
    link.click();
}

下载的pdf文件格式错误

1 个答案: