Embedded .doc and .txt viewer in React js

user_12586806 0
Viewed 7248

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 ?

react-redux react-native reactjs javascript
2 Answers

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.com/viewer?url=" + src + "&embedded=true"}
        title="file"
        width="100%"
        height="600"
      ></iframe>
    </div>
  );
};

export default DocIframe;

And inside your main component:

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

To see a sample working app: see this codesandbox

user_119846700

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

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