Loading Documents into the Document Viewer in React
This article explains how to load documents into the Document Viewer in React. It shows how to load documents from a base64 encoded string and a URL.
With the recently released React packages, the Document Editor and Document Viewer can be used in React JavaScript applications.
Learn More
This article shows how to use the TX Text Control Document Viewer in a React application. The Document Viewer is a powerful, web-based document viewing and editing component that is based on TX Text Control.
Using the TX Text Control Document Viewer in a React Application
In the tutorial above, documents are loaded through the documentData property during the initialization of the Document Viewer. However, in many applications, the document is dynamically and asynchronously loaded into the viewer as part of the workflow of the application.
Documents in all supported formats, including DOCX, DOC, RTF, and HTML, can be loaded using the loadDocument method.
The use of this method on a button click is not a problem if the viewer has already been created. However, the problem is that the TXDocumentViewer object does not exist immediately when the page is loaded.
Using the Effect Hook
For this purpose, we will use the Effect Hook, which allows you to perform side effects. In the useEffect method, we will append the documentViewerLoaded event. This event is fired when the viewer is ready to load documents.
import React, { useRef, useEffect } from 'react';
import DocumentViewer from '@txtextcontrol/tx-react-document-viewer'
function App() {
useEffect(() => {
window.addEventListener('documentViewerLoaded', handleLoaded);
}, []);
const handleLoaded = (event) => {
var html = "<html><p>This is a document</p></html>";
var base64 = btoa(html);
event.srcElement['TXDocumentViewer'].loadDocument(base64, "loaded.html");
};
return (
<DocumentViewer
width="1000px"
height="800px"
basePath="https://backend.textcontrol.com?access-token=yourtoken">
</DocumentViewer>
);
}
export default App;In the handleLoaded method, we will use the TXDocumentViewer instance found in window (the source element of the event arguments), since React doesn't allow us to use unknown objects.
Loading a Document from a URL
The document can also be downloaded in the handleLoaded event and then loaded into the viewer to load a document from a Web API or any other URL.
import React, { useRef, useEffect } from 'react';
import DocumentViewer from '@txtextcontrol/tx-react-document-viewer'
function App() {
useEffect(() => {
window.addEventListener('documentViewerLoaded', handleLoaded);
}, []);
const handleLoaded = (event) => {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://yourapi.domain.com/api/document", true);
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
event.srcElement['TXDocumentViewer'].loadDocument(btoa(xhr.responseText), "loaded.html");
}
}
};
return (
<DocumentViewer
width="1000px"
height="800px"
basePath="https://backend.textcontrol.com?access-token=yourtoken">
</DocumentViewer>
);
}
export default App;Conclusion
Using the Effect Hook in React, the TXDocumentViewer can be used to load documents from a base64 encoded string and a URL.
Related Posts
ASP.NETASP.NET CoreDocument Editor
ASP.NET Core: Loading Documents in the Document Editor
Learn how to load a document in the Document Editor using ASP.NET Core. This article explains how to load a document from a file or a byte array and how to load a document from client-side…
Form Field Compatibility: Work with AcroForms, Legacy MS Word Forms, and…
This article shows how to work with form fields in TX Text Control and how they are compatible with other industry standards. It explains how to load and save AcroForms, legacy MS Word forms and…
Comments JavaScript API: Useful Tips and Tricks
The Comments JavaScript API is a powerful interface to customize the behavior of comments in the Document Editor. This article provides useful tips and tricks to get the most out of it.
Integrating Document Lifecycle Management with ASP.NET Core and C#
In this article, we will explore how to integrate document lifecycle management with ASP.NET Core and C#. We will illustrate why document lifecycle management is important and how it can be…
Loading Documents in React Document Viewer
This article explains how to load documents into the React Document Viewer by selecting values from a drop-down list. The drop-down list is populated with the values that then loaded into the…