CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-redux
Aniket Yadav
Aniket Yadav

Reputation: 139

Embedded .doc and .txt viewer in React js

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 ?

Upvotes: 3

Views: 11289

Answers (2)

Ali Sanad
Ali Sanad

Reputation: 11

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'} />

Upvotes: 1

Tibebes. M
Tibebes. M

Reputation: 7548

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

Upvotes: 7

Related Questions