Issue with Preserving Formatting (Images & Tables) When Downloading Manipulated Document in React
I'm working on a project that involves document manipulation using AI. The frontend is built with React.js, and the backend is built with Django.
Here's the workflow I'm trying to implement:
A user uploads a .docx document that contains text, images, and tables.
The document is rendered and manipulated in the frontend (e.g., modifying text, removing pages, etc.).
After manipulation, the user should be able to download the updated document with its original formatting preserved.
The problem:
Whenever I download the manipulated document from the frontend using any file-saving library (like file-saver or Blob), the formatting gets lost — all images and tables are stripped out, and only plain text is saved.
What I tried
I created an HTML Blob from the document and set the MIME type to application/vnd.openxmlformats-officedocument.wordprocessingml.document, then saved it with a .docx extension.
This preserves some formatting, like text styles and layout. But it corrupts images or doesn’t show them correctly when the downloaded .docx is opened in Word.
I understand that Word documents are not just HTML with a different extension — they follow a strict Open XML format. So masquerading HTML as .docx is likely why images break.