前两天更改缺陷的时候, 无意间看到了同事封装的upload组件预览doc文件, 效果还不错, 就看了看用的哪种方式, 使用的 iframe + Microsoft Office Viewer服务

后面我又延伸了两种方法, 我们一起来看看吧

一 、 iframe + Microsoft Office Viewer服务

这个如何实现呢, 首先需要我们先写一个iframe容器

随后准备一个可以访问的doc链接

准备完毕之后, 设置相应的宽高

将doc链接作为参数拼接到https://view.officeapps.live.com/op/embed.aspx后面, 这个时候, 再作为iframe的src属性值即可

等待加载完成, doc文件也就呈现出来了, 这个加载相对来说非常快

二、使用mammoth.js将其转化为HTML进行渲染

这一种方法, 转换之后存在样式问题, 大家了解一下如何使用即可

首先, 我们先来安装一下mammoth.js

npm install --save mammoth

安装完成之后, 进行引入

import { ref } from "vue";import mammoth from "mammoth";const docToHtml = ref("");

这时候, 创建了一个响应式数据, 这个数据用于接收转换的html, 最终需要使用 v-html 进行渲染

我们现在在页面写一个dom元素

<div v-html="docToHtml" style="width: 1000px; height: 500px"></div>

现在, 我们写一个转换逻辑, 我们只有一个在线链接, 需要下载一下, 最后调用 convertToHtml方法进行转化, 拿到数据之后, 进行赋值即可

我们看一下大致效果

其实我们可以加点样式, 这样就美观了

它将doc文件中的内容转化成了对应的Html元素了

三、使用docx-preview预览doc文件

首先需要安装docx-preview

npm i docx-preview --save

安装完成之后, 我们需要创建一个dom元素, 并引入一个 renderAsync 方法

import { renderAsync } from "docx-preview";

现在, 我们需要获取blob对象, 然后在合适的时机调用上面的方法, 将blob和dom元素一并传入即可

我们看一下效果

这三种方式实现word预览, 我们已经写完了, 向之前推荐过vue-office的word插件, 看留言区反馈不太好, 大家可以点击下方链接查看原文

Vue3借助vue-office插件实现word预览

接下来, 可以给项目中封装的upload扩展一下预览功能了

今天, 我们就讲解到这里

​来源：https://mp.weixin.qq.com/s/wpmgpK8674-xrt-D4HX_dw