react-file-viewer : 显示来自 API 的文件答案

【问题标题】：react-file-viewer : Display file from an APIreact-file-viewer : 显示来自 API 的文件
【发布时间】：2020-04-09 20:56:56
【问题描述】：

我正在尝试使用 react-file-viewer 包在我的应用程序中预览 pdf 文件。我可以将此包与从外部文件存储源请求文件的 api 一起使用吗？

App-a 是我上传文件的文件存储应用程序。

App-b 是我要在其中预览上传文件的应用程序，我打算在其中使用react-file-viewer

import React from 'react'
import FileViewer from 'react-file-viewer';

const file_pdf = 'files/sample.pdf';
const type_pdf ='pdf';

export default class FilePreview extends React.Component {
    render() {
        return (
            <div className="mWrapper">
                <div className="gWrapper">
                    <div className="dViewer">
                        <div className="gSubtitle">
                            <h2>DOCX</h2>
                        </div>
                        <FileViewer
                            fileType={type_doc}
                            filePath={file_doc}
                            />
                    </div>
                </div>
            </div>
        );
    }
}

file_doc 这里是我的应用程序结构中目录的物理路径。这可以改为 API 调用吗？

【问题讨论】：

标签： javascript reactjs file

【解决方案1】：

您可以使用 useEffect 挂钩来调用 api。获取数据后，为FileViewer 组件设置路径和文件类型。

import React, { useEffect, useState } from 'react'
....

export default class FilePreview extends React.Component {
const [file, setFile] = useState(null);

useEffect(() => {
  fetch('https://your.document/api/')
  .then(results => results.json())
  .then(data => {
    setFile(data.results);
  });
},[]);

render() {
    return (
        <div className="mWrapper">
            <div className="gWrapper">
                <div className="dViewer">
                    <div className="gSubtitle">
                        <h2>DOCX</h2>
                    </div>
                    {file &&
                      <FileViewer
                        fileType={file.type_doc}
                        filePath={file.file_doc}
                        />
                    }
                </div>
            </div>
        </div>
    );
}
}

【讨论】：