前端实现doc文件预览的三种方式

文章目录

  • [1、docx-preview 实现(推荐)](#1、docx-preview 实现(推荐))
  • [2、vue-office 实现](#2、vue-office 实现)
  • [3、mammoth 实现(不推荐)](#3、mammoth 实现(不推荐))

需求:有一个docx文件,需要按其本身的格式,将内容展示出来,即:实现doc文件预览。

本文将doc文件存放到前端项目的public目录下

1、docx-preview 实现(推荐)

安装命令 npm install docx-preview

实现代码

javascript 复制代码
<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(网络地址)即可完成文档预览。
  • 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态。
  • 性能好:针对数据量较大做了优化。

安装命令

bash 复制代码
# 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文档,安装好如下:

实现代码

javascript 复制代码
<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

实现代码

javascript 复制代码
<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文档的样式没有了,所以不推荐直接使用此中方式预览doc文件

相关推荐
拉不动的猪2 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程11 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常35 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中39 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木43 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js