vue3.x实现word文件的预览

最近开发了一个需求，要求实现预览图片、pdf、excel、word、txt等格式的文件；
每种格式的文件想要实现预览的效果需要使用对应的插件，如果要实现word格式文件的预览，要用到哪种插件呢？
答案：mammoth.browser.min.js

我先转载一篇文章大家看看，我的实现方式和文章中差不多。

一、Mammoth.js 简介

Mammoth 旨在转换 .docx 文档（例如由 Microsoft Word 创建的文档），并将其转换为 HTML。 Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。比如，Mammoth 会将应用标题 1 样式的任何段落转换为 h1 元素，而不是尝试完全复制标题的样式（字体，文本大小，颜色等）。

二、Mammoth.js示例

Version: v1.4.8
Github: https://github.com/mwilliamson/mammoth.js
NPM: https://www.npmjs.com/package/mammoth
CDN: https://cdn.jsdelivr.net/npm/[email protected]/mammoth.browser.min.js

三、安装

npm install --save mammoth

四、代码说明

<template>
  <div class="word-wrap">
    <div id="wordView" v-html="wordText" />
  </div>
</template>

<script>
// docx文档预览(只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等)
import mammoth from "mammoth";
export default {
    
    
  data() {
    
    
    return {
    
    
      wordText: "",
      wordURL: 'vue-mobile/media/word.docx'//文件地址
    };
  },
  created() {
    
    
    this.getWordText();
  },
  methods: {
    
    
    getWordText() {
    
    
      const xhr = new XMLHttpRequest();
      xhr.open("get", this.wordURL, true);
      xhr.responseType = "arraybuffer";
      xhr.onload = () => {
    
    
        if (xhr.status == 200) {
    
    
          mammoth.convertToHtml({
    
     arrayBuffer: new Uint8Array(xhr.response) }).then((resultObject) => {
    
    
            this.$nextTick(() => {
    
    
              this.wordText = resultObject.value;
            });
          });
        }
      };
      xhr.send();
    }
  },
};
</script>

<style lang="less">
.word-wrap {
    
    
  padding: 15px;
  img {
    
    
    width: 100%;
  }
}
</style>

————————————————
版权声明：本文为CSDN博主「JK-酱」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_42697806/article/details/125423742