To do Docx preview, you must make this divine library! !

Hey, I'm Immersive Talk
This article was first published on [Immersive Talk], my personal blogAlso synchronously updated.
Please indicate the source and copyright information at the beginning of the article when reprinting.
If this article is helpful to you, pleaseLike、Comment、Forward, support it, thank you!

With just a few lines of code, you can perfectly preview Word documents in your browser, and even the table styles, headers and footers are presented in its original form.

Next, I will share with you two Docx preview libraries:

docx-preview VS mammoth

docx-previewandmammothThey are two of the most popular Word document preview libraries, each with its own characteristics and suitable for different scenarios.

docx-preview: Selection of restored table

Simple installation:

npm install docx-preview

Basic usage:

import { renderAsync } from 'docx-preview';

 // After obtaining the blob or ArrayBuffer of the docx file
 renderAsync(docData, ('container')).then(() => ('Document rendering is completed!'));

After trying it, the rendering effect of this library is exactly the same as that opened by Office! Even the paragraph format, table style, and even the pagination effect are perfectly presented.

mammoth: a simple first converter

Mammoth has a completely different idea, it converts Word documents into clean HTML:

npm install mammoth

It is also very easy to use:

import mammoth from 'mammoth';

 ({ arrayBuffer: docxBuffer }).then(result => {
     ('container').innerHTML = ;
     ('The conversion was successful, but there were some warnings:', );
 });

The converted HTML is very clean and only retains the semantic structure of the document.

For example, the "Title 1" style in Word will become the "HTML" style in HTML<h1>Label.

Which one is better for you?

Scene 1: Create a simple Word previewer

To preview Word documents online and look exactly like "Word".

First choicedocx-preview：

import { renderAsync } from 'docx-preview';

 async function previewDocx(fileUrl) {
     try {
         // Get the file
         const response = await fetch(fileUrl);
         const docxBlob = await ();

         // Render to the page
         const container = ('docx-container');
         await renderAsync(docxBlob, container, null, {
             className: 'docx-viewer',
             inWrapper: true,
             breakPages: true,
             renderHeaders: true,
             renderFooters: true,
         });

         ('Document rendering successfully!');
     } catch (error) {
         ('An error occurred while rendering the document:', error);
     }
 }

The effect is great! Document paging displays, and the catalog, header, footer, and table border styles are perfectly presented.

But there are some small pitfalls:

When the document is particularly large, the rendering speed will slow down
Some complex Word features may not display perfectly

Scenario 2: Do a content editing system

You need to have the user upload a Word document and then extract the content for editing.

choosemammoth：

import mammoth from 'mammoth';

 async function extractContent(file) {
     try {
         // Read the file
         const arrayBuffer = await ();

         // Custom style mapping
         const options = {
             styleMap: ["p[style-name='Precautions'] => -warning", "p[style-name='Important Tips'] => -danger"],
         };

         const result = await ({ arrayBuffer }, options);
         ('content').innerHTML = ;

         if ( > 0) {
             ('There are some minor problems with the conversion:', );
         }
     } catch (error) {
         ('Convert document failed:', error);
     }
 }

The advantages of mammoth are fully utilized in this scenario:

Semantic HTML: Generate a clean HTML structure
Style Mapping: You can customize the mapping rules of Word style to HTML elements
Lightweight conversion: Very fast processing speed

Advanced skills

Advanced configuration of docx-preview

renderAsync(docxBlob, container, styleContainer, {
     className: 'custom-docx', // Custom CSS class name prefix
     inWrapper: true, // Whether to use a wrapper container
     ignoreWidth: false, // Whether to ignore page width
     ignoreHeight: false, // Whether to ignore page height
     breakPages: true, // Whether to display paging
     renderHeaders: true, // Whether to display the header
     renderFooters: true, // Whether to display the footer
     renderFootnotes: true, // Whether to display footnotes
     renderEndnotes: true, // Whether to display the endnote
     renderComments: true, // Whether to display comments
     useBase64URL: false, // Use Base64 or ObjectURL to process resources
 });

Super practical tips: If you just want to render the document into a whole page (no pages), just set it upbreakPages: false！

Custom image processing for mammoth

By default, mammoth converts the image into base64 and embeds HTML.

In large documents, this can result in particularly large HTML.

Better solution:

const options = {
     convertImage: (function (image) {
         return ().then(function (imageBuffer) {
             // Create blob URL instead of base64
             const blob = new Blob([imageBuffer], { type: });
             const url = (blob);

             return {
                 src: url,
                 alt: 'document picture',
             };
         });
     }),
 };

 ({ arrayBuffer: docxBuffer }, options).then(/* ... */);

In this way, the images are loaded in the form of a Blob URL, and the page performance is significantly improved!

Comparison of other solutions

To be honest, there are other solutions before selecting these two libraries:

Microsoft Office Online Preview

Using Microsoft's official Office Online Server or Microsoft 365 online services, through embeddingWebViewor<iframe>Implement online rendering of DOCX.

Sample code:

<iframe src="/op/?src=Document URL"></iframe>

advantage

High format restore: Supports complex typesetting, charts, formulas, etc.
No local dependencies required: Browser-only implementation.
Official maintenance: The best compatibility.

Trouble, ordocx-previewandmammothThese two brothers are the most practical.

They provide a lightweight solution that can solve Word preview problems in just a few dozen KB, and do not rely on external services and can be implemented on the front end.

Written at the end

docx-previewSuitable for scenarios that require high restore, such as document preview systems;

andmammothSuitable for content extraction and document-to-html conversion scenarios, such as content management systems.

andMicrosoft Office OnlineSuitable for high-restore public documents.

Choose the right tool according to your specific needs!

I plan to write about powerpoint, excel, pdf, and picture series later. Friends who need it can follow it!