office文件在线预览

项目场景:后台管理项目中需要展示world、excel等文件

 


问题描述

前端预览office插件大多数都是收费的,比如:XDOC文档预览云服务(有试用期)

需要一个免费的且兼容各种文件格式的方法


解决方案:

使用微软在线的api,实现全部的office文件预览

前提是需要后端提供文本在线的链接且必须是域名链接  必须是域名链接

'https://view.officeapps.live.com/op/embed.aspx?src='+ url(文档在线连接)
<el-dialog title="预览" :visible.sync="open1" width="1000px" height="800px" append-to-body>
      <iframe width="900px" height="600px"
        :src='url1'>
      </iframe>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadField">下载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
         look(url){
          //需要判断一下是office文件还是pdf  pdf不用加微软的api
         let str =  url.substring(url.lastIndexOf(".")+1)
          if(str == 'pdf'){
            this.url1 = url
            this.open1=true;
            this.fileUrl = url
          }else{
            this.url1 = 'https://view.officeapps.live.com/op/embed.aspx?src='+url
            this.open1=true;
            this.fileUrl = url
          }
        },

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值