word预览方式---插件，vue-office-docx、docx-preview、mammoth.js

提示：word预览方式---插件

### 文章目录

[@ $TOC$ (文章目录)](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)
[前言](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)
[一、vue-office-docx](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)
[二、docx-preview](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)
[三、mammoth.js](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)
[总结](#文章目录 @TOC 前言一、vue-office-docx 二、docx-preview 三、mammoth.js 总结)

前言

word预览

一、vue-office-docx

c 复制代码

npm install vue-office-docx -S-D

officeDocx.vue

c 复制代码

<template>
    <div class="preview_box">
      <VueOfficeDocx :src="htmlContent"></VueOfficeDocx>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import VueOfficeDocx from '@vue-office/docx'
  //引入相关样式
  import '@vue-office/docx/lib/index.css';

  
  export default {
    name: 'preview',
    components:{VueOfficeDocx},
    data () {
      return {
        src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          this.htmlContent = res.data;
        })
      }
    }
  }
  </script>
  <style scoped></style>

样式还原度一般，间距太大，分页也有问题

二、docx-preview

c 复制代码

npm install docx-preview -S-D

docxPreview.vue

c 复制代码

<template>
    <div class="preview_box">
       <div ref="docxPreviewRef"></div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import { renderAsync }  from 'docx-preview'

  
  export default {
    name: 'preview',
    components:{},
    data () {
      return {
        src:`.docx文件rul`,
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          renderAsync(res.data, this.$refs.docxPreviewRef);
        })
      }
    }
  }
  </script>
  <style scoped></style>

样式还原度一般，无分页

三、mammoth.js

c 复制代码

npm install mammoth.js -S-D

docxMammoth.vue

c 复制代码

<template>
    <div class="preview_box">
       <div ref="docxPreviewRef" v-html="htmlContent"></div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  import mammoth  from 'mammoth'
  export default {
    name: 'preview',
    components:{},
    data () {
      return {
        src:`.docx文件rul`,
        htmlContent:''
      }
    },
    mounted(){
      this.docToHtml();
    },
    methods: {
      docToHtml(){
        axios.get(this.src,{ responseType: 'arraybuffer' }).then((res)=>{
          mammoth.convertToHtml({ arrayBuffer: new Uint8Array(res.data) }).then((html)=>{
            this.htmlContent = html.value;
          })
        })
      }
    }
  }
  </script>
  <style scoped></style>

样式有问题，表格都没了

总结

踩坑路漫漫长@~@