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>
  

样式有问题,表格都没了

总结

踩坑路漫漫长@~@

相关推荐
视频砖家29 分钟前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689971 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing3 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆3 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding4 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景5 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘5 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾6 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉6 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html