前端實(shí)現(xiàn)docx文件預(yù)覽的3種方式舉例及分析

更新時間：2025年03月06日 08:44:09 作者：英子的搬磚日志

這篇文章主要介紹了前端實(shí)現(xiàn)docx文件預(yù)覽的3種方式,三種方式分別是docx-preview、vue-office和mammoth,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

需求：

有一個docx文件，需要按其本身的格式，將內(nèi)容展示出來，即：實(shí)現(xiàn)doc文件預(yù)覽。

本文將doc文件存放到前端項(xiàng)目的public目錄下

1、docx-preview 實(shí)現(xiàn)（推薦）

安裝命令 npm install docx-preview

實(shí)現(xiàn)代碼

<template>
  <div class="document-wrapper">
    <div class="content" ref="contentRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import { renderAsync } from 'docx-preview';

const contentRef = ref<any>(null);

function getDocxContent() {
  // 注意：如果是前端本地靜態(tài)文件，需要放放在public目錄下
  axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
    renderAsync(res.data, contentRef.value);
  }).catch((err) => { console.log(err) })
}
getDocxContent();

</script>

<style lang="less">
.document-wrapper {
  margin: 10px;
}

// 設(shè)置word文檔的樣式
// .docx-wrapper {
//   background: white !important;
//   border: 1px solid red;

//   section {
//     width: 100% !important;
//     padding: 20px !important;
//   }

//   .docx {
//     box-shadow: none !important;
//   }
// }</style>

效果：樣式還原度一般，無分頁

2、vue-office 實(shí)現(xiàn)

vue-office特點(diǎn)：

一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)、ppt(.pptx)多種文檔的在線預(yù)覽方案。
簡單：只需提供文檔的src(網(wǎng)絡(luò)地址)即可完成文檔預(yù)覽。
體驗(yàn)好：選擇每個文檔的最佳預(yù)覽方案，保證用戶體驗(yàn)和性能都達(dá)到最佳狀態(tài)。
性能好：針對數(shù)據(jù)量較大做了優(yōu)化。

安裝命令

# docx文檔預(yù)覽，基于docx-preview庫實(shí)現(xiàn)
npm install @vue-office/docx

# excel文檔預(yù)覽，基于exceljs和x-data-spreadsheet實(shí)現(xiàn)，全網(wǎng)樣式支持更好
npm install @vue-office/excel

# pdf文檔預(yù)覽，基于pdfjs庫實(shí)現(xiàn)，實(shí)現(xiàn)了虛擬列表增加性能
npm install @vue-office/pdf

# pptx文檔預(yù)覽，基于pptx-preview實(shí)現(xiàn)
npm install @vue-office/pptx

本文只針對word文檔，安裝好如下：

實(shí)現(xiàn)代碼

<template>
  <div class="document-wrapper">
    <VueOfficeDocx :src="fileData" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import VueOfficeDocx from '@vue-office/docx'

const fileData = ref<any>(null);

function getDocxContent() {
  // 注意：本地靜態(tài)文件需要放放在public目錄下
  axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
    fileData.value = res.data;
  }).catch((err) => { console.log(err) })
}
getDocxContent();

</script>

<style lang="less">
.document-wrapper {
  margin: 10px;
}
</style>

效果： 同第一種方式實(shí)現(xiàn)的效果

3、mammoth 實(shí)現(xiàn)（不推薦）

安裝命令：npm install mammoth

實(shí)現(xiàn)代碼

<template>
  <div class="document-wrapper">
    <div ref="docxPreviewRef" v-html="fileContent"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import mammoth from 'mammoth';

const fileContent = ref<any>(null);

function getDocxContent() {
  axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
    mammoth.convertToHtml({ arrayBuffer: new Uint8Array(res.data) }).then((res) => {
      fileContent.value = res.value;
    })
  }).catch((err) => { console.log(err) })
}
getDocxContent();

</script>

<style lang="less">
.document-wrapper {
  margin: 10px;
}
</style>

效果： word文檔的樣式?jīng)]有了，所以不推薦直接使用此中方式預(yù)覽.docx文件