当前位置：首页 > JavaScript

js 实现docx在线预览

2026-03-01 10:16:07JavaScript

使用 docx-preview 库

docx-preview 是一个专门用于在浏览器中预览 DOCX 文件的 JavaScript 库。它可以将 DOCX 文件转换为 HTML 格式，方便在网页中展示。

安装方式：

npm install docx-preview

基本用法：

import { renderAsync } from 'docx-preview';

const container = document.getElementById('docx-container');
const docxFile = /* 你的 DOCX 文件数据 */;

renderAsync(docxFile, container).then(() => {
    console.log('DOCX 渲染完成');
});

使用 mammoth.js 转换

mammoth.js 是一个将 DOCX 转换为 HTML 的 JavaScript 库，适合需要自定义转换结果的场景。

js 实现docx在线预览

安装：

npm install mammoth

基本用法：

import * as mammoth from "mammoth";

const docxFile = /* 你的 DOCX 文件数据 */;

mammoth.extractRawText({ arrayBuffer: docxFile })
    .then(result => {
        document.getElementById('output').innerHTML = result.value;
    })
    .catch(error => {
        console.error(error);
    });

使用 Office Online 嵌入预览

通过微软 Office Online 的嵌入功能，可以在网页中嵌入 DOCX 文件的预览。

js 实现docx在线预览

<iframe 
    src="https://view.officeapps.live.com/op/embed.aspx?src=你的文档URL" 
    width="100%" 
    height="600px" 
    frameborder="0">
</iframe>

使用 Google Docs 嵌入预览

类似 Office Online，Google Docs 也提供文档嵌入功能。

<iframe 
    src="https://docs.google.com/viewer?url=你的文档URL&embedded=true" 
    width="100%" 
    height="600px" 
    frameborder="0">
</iframe>

使用 PDF.js 间接预览

先将 DOCX 转换为 PDF，再用 PDF.js 预览。需要后端配合转换或使用前端转换库。

PDF.js 基本用法：

const loadingTask = pdfjsLib.getDocument('your.pdf');
loadingTask.promise.then(pdf => {
    pdf.getPage(1).then(page => {
        const viewport = page.getViewport({ scale: 1.0 });
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({
            canvasContext: context,
            viewport: viewport
        });
    });
});