前端实现docx文件预览的3种方式举例及分析
作者：英子的搬砖日志
这篇文章主要介绍了前端实现docx文件预览的3种方式,三种方式分别是docx-preview、vue-office和mammoth,文中给出了详细的代码示例,需要的朋友可以参考下
需求：
有一个docx文件，需要按其本身的格式，将内容展示出来，即：实现doc文件预览。
本文将doc文件存放到前端项目的public目录下
1、docx-preview 实现（推荐）
安装命令 npm install docx-preview
实现代码
<template>
<div class="document-wrapper">
<div class="content" ref="contentRef"></div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import { renderAsync } from 'docx-preview';
const contentRef = ref<any>(null);
function getDocxContent() {
// 注意：如果是前端本地静态文件，需要放放在public目录下
axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
renderAsync(res.data, contentRef.value);
}).catch((err) => { console.log(err) })
}
getDocxContent();
</script>
<style lang="less">
.document-wrapper {
margin: 10px;
}
// 设置word文档的样式
// .docx-wrapper {
// background: white !important;
// border: 1px solid red;
// section {
// width: 100% !important;
// padding: 20px !important;
// }
// .docx {
// box-shadow: none !important;
// }
// }</style>
效果： 样式还原度一般，无分页
2、vue-office 实现
vue-office特点：
- 一站式：提供word(.docx)、pdf、excel(.xlsx, .xls)、ppt(.pptx)多种文档的在线预览方案。
- 简单：只需提供文档的src(网络地址)即可完成文档预览。
- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态。
- 性能好：针对数据量较大做了优化。
安装命令
# docx文档预览，基于docx-preview库实现 npm install @vue-office/docx # excel文档预览，基于exceljs和x-data-spreadsheet实现，全网样式支持更好 npm install @vue-office/excel # pdf文档预览，基于pdfjs库实现，实现了虚拟列表增加性能 npm install @vue-office/pdf # pptx文档预览，基于pptx-preview实现 npm install @vue-office/pptx
本文只针对word文档，安装好如下：
实现代码
<template>
<div class="document-wrapper">
<VueOfficeDocx :src="fileData" />
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import VueOfficeDocx from '@vue-office/docx'
const fileData = ref<any>(null);
function getDocxContent() {
// 注意：本地静态文件需要放放在public目录下
axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
fileData.value = res.data;
}).catch((err) => { console.log(err) })
}
getDocxContent();
</script>
<style lang="less">
.document-wrapper {
margin: 10px;
}
</style>
效果： 同第一种方式实现的效果
3、mammoth 实现（不推荐）
安装命令：npm install mammoth
实现代码
<template>
<div class="document-wrapper">
<div ref="docxPreviewRef" v-html="fileContent"></div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import mammoth from 'mammoth';
const fileContent = ref<any>(null);
function getDocxContent() {
axios.get('/test.docx', { responseType: 'arraybuffer' }).then((res) => {
mammoth.convertToHtml({ arrayBuffer: new Uint8Array(res.data) }).then((res) => {
fileContent.value = res.value;
})
}).catch((err) => { console.log(err) })
}
getDocxContent();
</script>
<style lang="less">
.document-wrapper {
margin: 10px;
}
</style>
效果： word文档的样式没有了，所以不推荐直接使用此中方式预览.docx文件
总结
到此这篇关于前端实现docx文件预览的3种方式的文章就介绍到这了,更多相关前端实现docx文件预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！