vue docx-preview实现docx文件在线预览

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

        之前一般做项目进行文件浏览的时候基本都是用的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判断,是图片文件还是

评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值