JavaScript使用docx-preview和mammoth预览Docx

npm install docx-preview

import { renderAsync } from 'docx-preview';

// 获取到docx文件的blob或ArrayBuffer后
renderAsync(docData, document.getElementById('container')).then(() => console.log('文档渲染完成！'));

npm install mammoth

import mammoth from 'mammoth';

mammoth.convertToHtml({ arrayBuffer: docxBuffer }).then(result => {
    document.getElementById('container').innerHTML = result.value;
    console.log('转换成功，但有些警告：', result.messages);
});

import { renderAsync } from 'docx-preview';

async function previewDocx(fileUrl) {
    try {
        // 获取文件
        const response = await fetch(fileUrl);
        const docxBlob = await response.blob();

        // 渲染到页面上
        const container = document.getElementById('docx-container');
        await renderAsync(docxBlob, container, null, {
            className: 'docx-viewer',
            inWrapper: true,
            breakPages: true,
            renderHeaders: true,
            renderFooters: true,
        });

        console.log('文档渲染成功！');
    } catch (error) {
        console.error('渲染文档时出错:', error);
    }
}

import mammoth from 'mammoth';

async function extractContent(file) {
    try {
        // 读取文件
        const arrayBuffer = await file.arrayBuffer();

        // 自定义样式映射
        const options = {
            styleMap: ["p[style-name='注意事项'] => div.alert-warning", "p[style-name='重要提示'] => div.alert-danger"],
        };

        const result = await mammoth.convertToHtml({ arrayBuffer }, options);
        document.getElementById('content').innerHTML = result.value;

        if (result.messages.length > 0) {
            console.warn('转换有些小问题:', result.messages);
        }
    } catch (error) {
        console.error('转换文档失败:', error);
    }
}

renderAsync(docxBlob, container, styleContainer, {
    className: 'custom-docx', // 自定义CSS类名前缀
    inWrapper: true, // 是否使用包装容器
    ignoreWidth: false, // 是否忽略页面宽度
    ignoreHeight: false, // 是否忽略页面高度
    breakPages: true, // 是否分页显示
    renderHeaders: true, // 是否显示页眉
    renderFooters: true, // 是否显示页脚
    renderFootnotes: true, // 是否显示脚注
    renderEndnotes: true, // 是否显示尾注
    renderComments: true, // 是否显示评论
    useBase64URL: false, // 使用Base64还是ObjectURL处理资源
});

const options = {
    convertImage: mammoth.images.imgElement(function (image) {
        return image.readAsArrayBuffer().then(function (imageBuffer) {
            // 创建blob URL而不是base64
            const blob = new Blob([imageBuffer], { type: image.contentType });
            const url = URL.createObjectURL(blob);

            return {
                src: url,
                alt: '文档图片',
            };
        });
    }),
};

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

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=文档URL"></iframe>