之前一般做项目进行文件浏览的时候基本都是用的window.open+url的形式打开文件,进行浏览操作的,但是这种打开方式只能够在线浏览如jpg、png、pdf这类文件,对于文档类型docx这种则是用下载的方式打开的。这次甲方爸爸不想要下载了,于是就来使docx-preview这个在线预览组件了。(这个插件只能够实现docx后缀的文件,doc文件打不开滴)
1.下载插件
npm i docx-preview --save
or
yarn add docx-preview
2.导入
import { renderAsync } from 'docx-preview';
//一般用这种形式就行了
let docx = requie('docx-preview');
//我是vue3项目 报错require不行 就用的下边这种了
let docx = import.meta.glob('docx-preview');
3.使用组件

如图有两个文件,设计点击时传送文件file 得到如下数据

因为之前上传时已经限定了上传文件格式,所以通过fileType判断,是图片文件还是

文章介绍了如何利用npm包docx-preview在Vue3项目中实现docx文件的在线预览,避免文件下载。通过fetch获取文件blob数据,然后在特定元素上使用docx-preview组件进行渲染。同时,文章还提到如何通过CSS调整组件的默认样式以满足UI需求。
最低0.47元/天 解锁文章
9534





