在React js中嵌入.doc和.txt查看器

Question

我有一个react应用程序，用户可以在其中拖放左侧的文件，上传文件后，当你点击它时，你会看到文件的内容。我已经将带有pdf扩展名的图像和文件渲染到应用程序中。我很困惑如何将.doc和.text文件呈现到React中构建的web apk中。

有人知道如何在react应用程序中呈现.doc和.txt文件吗？

Answer 1

这里有一种在react应用程序中显示docx页面的方法(通过谷歌文档查看器(

doc.js

import React from "react";
const DocIframe = ({ source }) => {
if (!source) {
return <div>Loading...</div>;
}
const src = source;
return (
<div>
<iframe
src={"https://docs.google.com/viewer?url=" + src + "&embedded=true"}
title="file"
width="100%"
height="600"
></iframe>
</div>
);
};
export default DocIframe;

在你的主要组件内部：

import React from "react";
import DocViewer from "./doc.js";
export default function App() {
return (
<div className="App">
<h1>Sample Doc file:</h1>
<DocViewer source="https://file-examples-com.github.io/uploads/2017/02/file-sample_100kB.doc" />
</div>
);
}

要查看示例工作应用程序：请参阅此代码沙盒

Answer 2

如果iframe工作不正常，则可以使用embed标记。

<embed type="application/pdf" src={'https://docs.google.com/viewer?url=' + src +'&embedded=true'} />