根据 API 响应在组件内部渲染 PDF 文件

Question

我有一个 APIs returns File(byte[], "application/pdf") | 来自服务器的字节[]。

在前端部分，我创建了一个请求，可以将此文件像 pdf 文件一样保存到计算机，但我需要 来存储此文件（状态或其他方式）并在反应中呈现像PDF文件这样的组件，它可以放在iframe或其他方式上（对我来说没关系，只需要在从API获取文件后在组件内渲染）。

 const instance = axios.create({
  baseURL: process.env.REACT_APP_API_ROOT,
  headers: {
    "Content-Type": "application/json",
  },
});

    function getPdfByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}`);
}

function getPdfAsBlobByFileName(fileName: string): any {
  return instance.get(`pdfs/${fileName}/array`);
}

 useEffect(() => {
      getPdfByFileName("fileName")
        .then((response: AxiosResponse) => {
          // const file = new Blob([response.data], { type: "application/pdf" }); // For  API which returns blob
          setPdf(response.data); // Need store file and correct render like PDF
        })
        .catch((err: AxiosError) => {
         // process err
        });
    }
  }, []);

     return (
    <div>
      <iframe title="pdf" width="100%" height="600px" srcDoc={pdf}></iframe>
    </div>
  );

结果：Inside component I render the data but it's no PDF

我试过了：

在这些请求中使用“Content-Type”：“application/pdf”。
将 URL 放入 Iframe src 属性中的文件（适用于匿名，但我们有 Bearer 并且需要保护数据。
从 blob API 响应生成 URL 并放入 Iframe（无效）。
不同的 pdf 查看器，它们可以根据文件路径很好地处理物理 PDF 文件，但不适用于我的情况。

感谢您的帮助。

Answer 1

对我来说，问题出在 axios 上，响应不正确，我只是切换到使用 fetch 方法，然后这种情况开始对我来说是正确的，与 axios 一样对我不起作用

    const request = new Request(`URL_TO_API`,
            {
              method: "GET",
              headers: {
                Authorization: `Bearer ${accessToken}`,
              },
              mode: "cors",
              cache: "default",
            }
          );
    
          fetch(request)
            .then((response) => response.blob())
            .then((blob) => {              
              const file = window.URL.createObjectURL(blob);
              const iframe = document.querySelector("iframe");
              if (iframe?.src) iframe.src = file;
            })
            .catch((err: AxiosError) => {
              // process error
            });
return (        
    <div>
      <iframe src="" width="100%" height="100%"></iframe>
    </div>
  );

根据 API 响应在组件内部渲染 PDF 文件

React render PDF file inside component based on API response

javascript

reactjs

pdf

axios

pdf-generation