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>
  

样式有问题,表格都没了

总结

踩坑路漫漫长@~@

相关推荐
mCell18 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip18 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 天前
JavaScript 作用域
前端·javascript
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试