基于 docx-preview 的 Word 预览组件实现方案分享

npm install docx-preview

npm install docx-preview

import { renderAsync } from "docx-preview";

export default {
  name: 'WordPreview',

  props: {
    src: { type: String, required: true } // 文件地址
  },

  data() {
    return {
      loading: true,
      error: null
    };
  },

  mounted() {
    this.loadDocx();
  },

  methods: {
    async loadDocx() {
      try {
        this.loading = true;
        
        // 通过 fetch 下载文件
        const res = await fetch(this.src);
        const blob = await res.blob();

        // 渲染到容器
        const container = this.$refs.viewer;
        
        // 解析 docx 内容，并生成 HTML
        await renderAsync(blob, container, {
          debug: false,
          experimental: true
        });

      } catch (e) {
        this.error = "文件预览失败";
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
  },

  render(h) {
    return (
      <div class="docx-preview-wrapper">
        {this.loading && <div>加载中...</div>}
        {this.error && <div>{this.error}</div>}
        <div ref="viewer" class="docx-content"></div>
      </div>
    );
  }
};

import { renderAsync } from "docx-preview";

export default {
  name: 'WordPreview',

  props: {
    src: { type: String, required: true } // 文件地址
  },

  data() {
    return {
      loading: true,
      error: null
    };
  },

  mounted() {
    this.loadDocx();
  },

  methods: {
    async loadDocx() {
      try {
        this.loading = true;
        
        // 通过 fetch 下载文件
        const res = await fetch(this.src);
        const blob = await res.blob();

        // 渲染到容器
        const container = this.$refs.viewer;
        
        // 解析 docx 内容，并生成 HTML
        await renderAsync(blob, container, {
          debug: false,
          experimental: true
        });

      } catch (e) {
        this.error = "文件预览失败";
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
  },

  render(h) {
    return (
      <div class="docx-preview-wrapper">
        {this.loading && <div>加载中...</div>}
        {this.error && <div>{this.error}</div>}
        <div ref="viewer" class="docx-content"></div>
      </div>
    );
  }
};

.docx-content {
  padding: 20px;
  background: #fff;
}

.docx-preview-wrapper {
  overflow: auto;
  height: 100%;
}

.docx-content {
  padding: 20px;
  background: #fff;
}

.docx-preview-wrapper {
  overflow: auto;
  height: 100%;
}

sudo apt install libreoffice

sudo apt install libreoffice

libreoffice --headless --convert-to docx xxx.doc --outdir output/

libreoffice --headless --convert-to docx xxx.doc --outdir output/

import { exec } from "child_process";
import path from "path";

function convertDocToDocx(inputFile, outputDir) {
  return new Promise((resolve, reject) => {
    const cmd = `libreoffice --headless --convert-to docx "${inputFile}" --outdir "${outputDir}"`;

    exec(cmd, (err) => {
      if (err) return reject(err);

      const outputFile = path.join(
        outputDir,
        path.basename(inputFile, ".doc") + ".docx"
      );

      resolve(outputFile);
    });
  });
}

import { exec } from "child_process";
import path from "path";

function convertDocToDocx(inputFile, outputDir) {
  return new Promise((resolve, reject) => {
    const cmd = `libreoffice --headless --convert-to docx "${inputFile}" --outdir "${outputDir}"`;

    exec(cmd, (err) => {
      if (err) return reject(err);

      const outputFile = path.join(
        outputDir,
        path.basename(inputFile, ".doc") + ".docx"
      );

      resolve(outputFile);
    });
  });
}

await renderAsync(blob, container, {
  inWrapper: true,          // 包装更完整的 DOM 结构
  ignoreWidth: false,
  ignoreHeight: false,
  breakPages: true
});

await renderAsync(blob, container, {
  inWrapper: true,          // 包装更完整的 DOM 结构
  ignoreWidth: false,
  ignoreHeight: false,
  breakPages: true
});

<link href="https://fonts.loli.net/css?family=Noto+Sans" rel="stylesheet">

<link href="https://fonts.loli.net/css?family=Noto+Sans" rel="stylesheet">