javascript - Embedded .doc and .txt viewer in React js - Stack Overflow

admin管理员组

文章数量:1293042

I have a react application where users can drag and drop there files on the left side and after uploading the file, when you click on it, you see the contents of the file. I have rendered image and files with pdf extensions into the application. I am confused how to render .doc and .text files into the web apk built in React.

Does anyone know how to render .doc and .txt files in react app ?

I have a react application where users can drag and drop there files on the left side and after uploading the file, when you click on it, you see the contents of the file. I have rendered image and files with pdf extensions into the application. I am confused how to render .doc and .text files into the web apk built in React.

Does anyone know how to render .doc and .txt files in react app ?

• javascript
• reactjs
• react-native
• react-redux

Share Improve this question Follow edited Sep 15, 2020 at 14:20 Aniket Yadav asked Sep 15, 2020 at 11:10 Aniket YadavAniket Yadav 13911 gold badge33 silver badges1111 bronze badges 2

• Please show us, what you already tried. What did work out for you, what didnt? What exactly is the question here? What are you confused about? – xKean Commented Sep 15, 2020 at 11:11
• I want to render .doc and .txt files using React. – Aniket Yadav Commented Sep 15, 2020 at 11:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Here is one approach to display docx page inside your react-app (via 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./viewer?url=" + src + "&embedded=true"}
        title="file"
        width="100%"
        height="600"
      ></iframe>
    </div>
  );
};

export default DocIframe;

And inside your main ponent:

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-.github.io/uploads/2017/02/file-sample_100kB.doc" />
    </div>
  );
}

To see a sample working app: see this codesandbox

You can use embed tag if the iframe is not working properly.

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

            

本文标签： javascriptEmbedded doc and txt viewer in React jsStack Overflow