美文网首页
前端实现文件在线预览txt,pdf,doc,xls,ppt几种格

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

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-11-12 16:37 被阅读0次

    一、做法就是使用iframe标签

    1.1、text,pdf的文件预览

    <iframe  :src="文件的地址"   frame ></iframe>
    

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

    <iframe   :src="https://view.officeapps.live.com/op/view.aspx?src=后面是文件的地址"   frame ></iframe>
    

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

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

    1.4. iframe 的宽高边框都是可配的,:width=宽的变量;:height=高的变量;:frameborder=边框的变量,no则是无边框

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

    相关文章

      网友评论

          本文标题:前端实现文件在线预览txt,pdf,doc,xls,ppt几种格

          本文链接:https://www.haomeiwen.com/subject/rdcrwdtx.html