Vue在线预览ppt,可嵌入组件显示也可新开页面显示

前言

最近需要在网页中嵌入一个在线ppt进行展示,虽然我之前通过pdf.js展示pdf来显示ppt内容,但这需要后台将我上传的ppt转换为pdf,工作量大一点,时间也长了点,部署也麻烦了点,所以就换了另一种更轻便的方式。

要是想了解一下上面这种方法的,可点击查看

更轻便的方法:使用微软提供的方法进行文件预览

(1)通过iframe嵌入组件内展示

<iframe id="iframe1" width="800" height="600" frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='no' allowtransparency='yes'
:src="'http://view.officeapps.live.com/op/view.aspx?src='+pathUrl"></iframe>

效果图:

在这里插入图片描述


(2)通过a便签点击展示

 //在当前网页显示ppt
 <a :href="'http://view.officeapps.live.com/op/view.aspx?src='+pathUrl">点击查看ppt</a>
 //新开窗口显示ppt
 <a target="_blank" :href="'http://view.officeapps.live.com/op/view.aspx?src='+pathUrl">点击查看ppt</a>

效果图:

在这里插入图片描述

(3)通过window.open()新开窗口预览ppt

window.open('http://view.officeapps.live.com/op/view.aspx?src='+pathUrl)

效果图跟点击a便签那个一样,只是这种方式不需要点击就可以直接预览。

  • 8
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值