在线预览Word,Excel~

今天有个需求, 直接支持web端预览word,excel等文件, 查了一下很多写的比较麻烦, 这里找到一种简单的方式:

http://view.officeapps.live.com/op/view.aspx?src=

src后面填写你上传的文件地址, 例如:https://view.officeapps.live.com/op/view.aspx?src=http://opd9w8mwo.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%96%87%E6%A1%A3.docx

很简单,Office都为我们做好了, 我们只需要添加一个sourceUrl就可以了。

具体的文档:https://blogs.office.com/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

Vue3本身并没有提供在线预览WordExcel文档的功能,但是可以借助第三方库来实现。 其中比较常用的是使用office-web-viewer库来实现WordExcel文件在线预览。该库可以通过引入JavaScript文件来实现在线预览WordExcel文件。具体实现方式可以参考官方文档:https://docs.microsoft.com/en-us/office/dev/add-ins/develop/office-online-embedding-office-content-in-an-iframe。 在Vue3中使用office-web-viewer库的步骤为: 1. 在Vue3项目中安装office-web-viewer库: ```bash npm install office-web-viewer --save ``` 2. 在需要预览WordExcel文件的组件中引入office-web-viewer的JavaScript文件: ```html <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"></script> ``` 3. 在需要预览WordExcel文件的组件中使用office-web-viewer库提供的方法来实现预览功能: ```javascript import OfficeViewer from 'office-web-viewer'; export default { data() { return { fileUrl: 'https://example.com/sample.docx', // WordExcel文件的URL地址 }; }, mounted() { const viewer = new OfficeViewer({ element: '#viewer', // 预览区域的DOM元素ID action: 'view', // 预览的动作,可以是view、print、edit等 fileType: 'docx', // 文件类型,可以是docx、xlsx等 embedAs: 'iframe', // 预览方式,可以是iframe或embed enableMobileFriendly: true, // 是否启用移动端友好模式 supportFullScreen: true, // 是否支持全屏模式 }); viewer.embed(this.fileUrl); // 加载预览WordExcel文件 }, }; ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值