首页 前端知识 word预览方式---插件,vue-office-docx、docx-preview、mammoth.js

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

2024-09-03 02:09:51 前端知识 前端哥 933 443 我要收藏

提示:word预览方式—插件

文章目录

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

前言

word预览

在这里插入图片描述

一、vue-office-docx

npm install vue-office-docx -S-D

officeDocx.vue

<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

npm install docx-preview -S-D

docxPreview.vue

<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

npm install mammoth.js -S-D

docxMammoth.vue

<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>
  

在这里插入图片描述
样式有问题,表格都没了

总结

踩坑路漫漫长@~@

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17506.html
标签
word
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!