当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 前端实现文件在线预览txt，pdf，doc，xls，ppt几种格式

前端实现文件在线预览txt，pdf，doc，xls，ppt几种格式

2019年04月24日  | 移动技术网IT编程  | 我要评论

做法就是使用iframe标签

1.text，pdf的文件预览

<iframe class="filename" :src="文件的地址" width='100%' height='600' frameborder='1' ></iframe>

2.doc,xls,ppt等office的预览

<iframe class="filename"  :src="https://view.officeapps.live.com/op/view.aspx?src=后面是文件的地址" width='100%' height='600' frameborder='1' ></iframe>

3.我们可以看出，差别只有src的属性，所以要设置文件预览同时可以满足text，pdf，和office类型格式的文件，只需要配置src就可以，根据文件后缀判断如果是office的类型就在url前加上

https://view.officeapps.live.com/op/view.aspx?src=
for (let i=0;i<this.data.quoteinfo.goodslist.length;i++) {
    for(let j=0;j<this.data.quoteinfo.goodslist[i].goodsattachments.fileattachmentlist.length;j++){
      let value = this.data.quoteinfo.goodslist[i].goodsattachments.fileattachmentlist[j]
      let valueformat = value.name.substring(value.name.lastindexof('.') + 1)//前面逻辑不用看，至此拿到文件后缀
      if(valueformat=='doc'|| valueformat=='docx'|| valueformat=='xls' || valueformat=='xlsx') {//根据后缀判断如果是office格式的，做路径的拼接，拼接微软在线预览地址即可
      要预览的文件地址='https://view.officeapps.live.com/op/view.aspx?src='+要预览的文件地址
    }
  }
}

这些格式之外的文件没有办法预览如rar，zip，会直接提醒你下载，基本完成预览的需求，重点就是预览文件前，把office文件的路径配置下，使用微软提供的在线office预览

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网