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

Question

我有一个React应用程序，用户可以在左侧拖放文件，上传文件后，单击文件时可以查看文件内容。我已经将图像和PDF扩展名的文件呈现到应用程序中。但是我不知道如何在使用React构建的Web apk中呈现.doc和.txt文件。

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

- Aniket Yadav

---

请展示一下你已经尝试过的内容。哪些是有效的，哪些是无效的？这里具体的问题是什么？你对什么感到困惑？ - xKean

我想使用React渲染.doc和.txt文件。 - Aniket Yadav

Answer 1

下面是一种在React应用程序中显示docx页面的方法（通过Google Docs Viewer）。

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>
  );
}

查看一个样例应用程序：点此访问Codesandbox

- Tibebes. M

---

嵌入Google文档查看器的iframe是否需要进行Google身份验证？并且在渲染文件方面是否存在每日限制？ - Aniket Yadav

从示例沙盒中可以看出，它不需要身份验证。我不知道是否有每日配额（因为它是公共/免费服务），但这很不可能。 - Tibebes. M

在我的网站上，用户可以将文件从本地计算机上传到网站，并且在提交文件之前，当用户单击文件时，应该能够预览文件。<iframe src={"https://docs.google.com/gview?url=" + this.state.file + "&embedded=true"} id="frame-id" allowFullScreen={true}/> 我已经实现了这个功能，但是现在当用户单击文件时，预览区域是空白的，并且文件被强制下载。有什么建议吗？ - Aniket Yadav

Answer 2

如果 iframe 无法正常工作，您可以使用 embed 标签。

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

            

- Ali Sanad

---

你的答案可以通过添加更多的支持信息来提高。请[编辑]以添加进一步的细节，如引用或文档，以便他人可以确认您的答案是正确的。您可以在帮助中心中找到有关编写好答案的更多信息。 - Community