reactjs 如何转换为blob a pdf文件？

zphenhs4 于 2023-05-06 发布在 React

关注(0)|答案(1)|浏览(175)

我有一个来自后端的pdf文件路径，类似于：http://example.com.com:3000/Invoices/11117_131805449_Invoice.pdf ...我想点击按钮下载。
在前端我做了：

const url = window.URL.createObjectURL(
        new Blob([invoicePath], { type: "application/pdf" })
      );
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", `invoice_${id}.pdf`);
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);

而且，当我点击下载它时，它被下载了，但显示一个错误，如：“无法加载PDF文档”...你知道吗？

reactjs

来源：https://stackoverflow.com/questions/76156381/how-to-convert-to-blob-a-pdf-file

1条答案

按热度按时间

3bygqnnd1#

您正在使用invoicePath创建一个Blob URL，但是，这种方法将不起作用，因为创建Blob URL实际上并不从服务器下载文件。
要下载该文件，您需要向服务器发出请求以获取PDF文件，然后从响应数据创建Blob URL。下面是应该可以工作的代码的更新版本：

fetch(invoicePath)
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", `invoice_${id}.pdf`);
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
  })
  .catch(error => console.error(error));

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 如何转换为blob a pdf文件？

1条答案

相关问题

热门标签

最新问答