Question

我正在从node.js后端接收pdf文件作为api调用响应。该文件在浏览器窗口中以编码格式打开。我尝试下载但下载的文件打开错误（错误：无法加载pdf文件）。我被告知响应主体是base64编码的。

可以通过任何方式正确打开/下载pdf。我使用的是react.js，它是新手。

代码段：

从“ js-file-download”导入FileDownload；

export function getTaxInvoice({token}){
  const authString = `Bearer ${token}`;

  return (dispatch) => {
    return axios.get(`${MAIN_URL}/rental_invoice`,{
      headers: {Authorization: authString, 'Accept': 'application/json','Content-Type': 'application/pdf'},
      responseType: "arraybuffer",//I have tried with blob as well
      encoding: null
      })
    .then((response)=>{
      FileDownload(response, 'some.pdf');
      const taxInvoiceUrl = window.URL.createObjectURL(new Blob([response.data]));
      window.open(taxInvoiceUrl, "_blank");
      console.log( response); 
      // dispatch(taxInvoiceLoadSuccess(taxInvoiceUrl));
      // dispatch(onViewChanged("rental_invoice"));
    }) 
    .catch((error)=>{
      dispatch(taxInvoiceLoadFailed());
    })
  }
}

来自api调用的响应： image snippet

Answer 1

尝试更改
FileDownload(response, 'some.pdf');
到
FileDownload(response.data, 'some.pdf');

Answer 2

这是我过去用来执行此操作的一些代码的示例：

function downloadURI (url, name) {
  var link = document.createElement('a')
  link.download = name
  link.href = url
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

export function download (url, type = 'application/pdf', name = 'example') {
  get(url, (err, result) => {
    if (err) return handleError(err)
    const blob = new Blob([result.body], { type })
    const downloadUrl = URL.createObjectURL(blob)
    downloadURI(downloadUrl, name)
  })
}

它将下载文件并创建一个对象URL，并通过以编程方式单击链接自动触发打开文件。

Answer 3

最终解决了这个问题（我的高级开发人员帮助了我）。最终代码如下：在npm上安装base64js并下载文件。

export function getTaxInvoice({token}){
  const authString = `Bearer ${token}`;

  return (dispatch) => {
    return axios.get(`${MAIN_URL}/rental_invoice`,{
      headers: {Authorization: authString, 'Accept': 'application/pdf','Content-Type': 'application/pdf'}
      })
    .then((response)=>{
      FileDownload(base64js.toByteArray(response.data), 'some.pdf');
      const taxInvoiceUrl = window.URL.createObjectURL(new Blob([base64js.toByteArray(response.data)], { type: "application/pdf" }) );
      window.open(taxInvoiceUrl, "_blank");
      dispatch(taxInvoiceLoadSuccess(response.data));
      dispatch(onViewChanged("rental_invoice"));
    }) 
    .catch((error)=>{
      console.log(error);
      dispatch(taxInvoiceLoadFailed());
    })
  }
}

pdf文件无法在浏览器中打开

3 个答案: