word预览方式---插件，vue-office-docx、docx-preview、mammoth.js
提示：word预览方式—插件
文章目录
- @[TOC](文章目录)
- 前言
- 一、vue-office-docx
- 二、docx-preview
- 三、mammoth.js
- 总结
文章目录
- @[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>
样式有问题，表格都没了
总结
踩坑路漫漫长@~@