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>
  

样式有问题,表格都没了

总结

踩坑路漫漫长@~@

相关推荐
人工智能训练师2 小时前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星2 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
唐•苏凯3 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军4 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。4 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴4 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
薄雾晚晴4 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua4 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL4 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统
kymjs张涛4 小时前
零一开源|前沿技术周刊 #15
前端·javascript·面试