前端实现文件在线预览txt,pdf,doc,xls,ppt几种格式
做法就是使用iframe标签
1.text,pdf的文件预览
<iframe :src="文件的地址" width='100%' height='600' frameborder='1' ></iframe>2.doc,xls,ppt等office的预览
<iframe :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预览
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!