如何从Next.Js或ReactJs中的安全API端点在react-doc-viewer中渲染文件？

j1dl9f46 于 2023-06-22 发布在 React

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

我想从安全的API在Next.JS Web应用程序中渲染文件。API返回以下数据

{
        "name": "Test1.docx",
        "contentUri": "https://api.mypurecloud.ie/api/v2/downloads/xxx",
        "contentType": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    }

我正在使用react-doc-viewer NPM包。渲染不安全的文件没有问题。谁能告诉我如何将身份验证令牌传递给这个包的API调用？
或者是否有其他方法可以在浏览器中呈现文件，而不必在客户端机器上下载它们？
我的准则是

export default function Home() {
  const docs = [
    { uri: '/test.pdf' }, // Local File
    { uri: 'https://url-to-my-pdf.pdf' }, // secure remote File
  ];

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className={styles.title}>Document Viewer</h1>
        <DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
      </main>
    </div>
  );
}

next.js

来源：https://stackoverflow.com/questions/70684273/how-to-render-file-in-react-doc-viewer-from-a-secure-api-endpoint-in-next-js-or

1条答案

按热度按时间

mf98qq941#

react-doc-viewer没有内置的支持，可以在请求的沿着发送额外的头（比如授权头）。但是，有几种方法可以解决这个问题：
1.代理服务器：您可以在后端创建一个代理服务器来获取文档。这样，客户端将从您的服务器请求文档，然后您的服务器将向实际的API发出单独的请求。您的服务器会将必要的授权头附加到第二个请求。
1.使用其他库获取文件数据：您可以使用另一个库（如axios）从API获取文件数据，而不是让react-doc-viewer处理网络请求。您将通过此请求传递授权标头。一旦你有了文件数据，你可以将其转换为Blob或Data URL，并将其传递给react-doc-viewer。
下面是一个使用axios的例子：

import axios from 'axios';
import { useState, useEffect } from 'react';
import DocViewer, { DocViewerRenderers } from 'react-doc-viewer';

export default function Home() {
  const [docs, setDocs] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(
        'https://api.mypurecloud.ie/api/v2/downloads/xxx',
        {
          headers: {
            Authorization: 'Bearer your_token_here',
          },
          responseType: 'blob', // Important
        }
      );

      const blob = new Blob([response.data], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);

      setDocs([{ uri: blobUrl }]);
    };

    fetchData();
  }, []);

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className={styles.title}>Document Viewer</h1>
        <DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
      </main>
    </div>
  );
}

在这个例子中，我们使用React的useState和useEffect钩子在组件挂载时获取文档。我们向文档URL发送GET请求，并包含授权头。我们还告诉axios将响应视为Blob。
然后，我们从响应数据创建一个Blob，并将其转换为Blob URL。我们将此URL设置为react-doc-viewer的URI。
这样，react-doc-viewer就不必发出任何网络请求，而可以显示我们已经获取的数据。

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

我来回答

如何从Next.Js或ReactJs中的安全API端点在react-doc-viewer中渲染文件？

1条答案

相关问题

热门标签

最新问答