前端实现docx文件预览的三种方式_docx-preview

文章目录

• 1、docx-preview 实现（推荐）
• 2、vue-office 实现
• 3、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) => {  rende