@cyntler/react-doc-viewer 在 React 中获取本地文件

Question

我尝试使用 React DocViewer...

这是我的组件：

<DocViewer 
                documents={doc}
                pluginRenderers={DocViewerRenderers}
                config={{
                    header: {
                    disableHeader: true,
                    disableFileName: true,
                    retainURLParams: true,
                    },
                    csvDelimiter: ';', // "," as default,
                    pdfZoom: {
                    defaultZoom: .1, // 1 as default,
                    zoomJump: 1, // 0.1 as default,
                    },
                    pdfVerticalScrollByDefault: false, // false as default
                }}
                onClose={this.handleClose}
            />

和我的链接：

const doc = [{ uri: "/bbbb.xlsx" }]; NOT WORK
const doc = [{ uri: "/ccccc.pdf" }]; WORKS
const doc = [{ uri: "https://mybucketname.s3.amazonaws.com/bbbb.xlsx" }]; WORKS

任何人对react中的这种情况有任何想法和解决方案...(nextJs)

你也可以建议我使用 React Library 中更好的 Office 文档查看器

Answer 1

Excel 与其他 Microsoft Office 文件一样，通过 Office Web Viewer 在 iFrame 中呈现，因此文件的路径必须是绝对路径并且可以从外部访问。

所以唯一的解决办法就是指定文件的绝对路径。 您还应该确保可以在线访问该文件。