How to render a word document in react app and highlight certain words inside the document dynamically?

113 Views Asked by At

I want to display Word files within my app and also highlight certain words within those files.

For understanding consider this simplified example, a react app that has 2 input fields and a submit button. The first field takes a link to the docx file and the second takes the words the user is looking for, on submit, we render that doc and highlight the words entered by the user

This seems like a problem for which an easy solution should exist but I've failed to find any.

Can someone please suggest something?

Currently, I'm using MS Word Viewer to display but that doesn't have the highlighting feature

<iframe
    src={`https://view.officeapps.live.com/op/embed.aspx?src=${url}&embedded=true`}
  ></iframe>

I've also tried react-doc-viewer but it also doesn't support this feature.(it might be using the MS Word viewer only )

I've used MarkJs to highlight words but both of the above methods render the file as an image and thus it's not possible to highlight the words inside the file.

I've tried mammothJs to convert the file to HTML and then use MarkJs on it but the word file loses all the styling and formatting with this approach.

0

There are 0 best solutions below