PC端后台管理系统实现在线预览文件

PC端后台管理系统实现在线预览文件

后台管理系统是每个新手前端必然接触的项目，当产品要求在线预览文件的预览的时候，我收集了两种在线预览的方法，希望对一些刚入门的小白有所帮助

1.使用iframe标签

微软有一个解析地址，Word、Xls、PPT这些文件需要使用微软官方的解析地址，如微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址才能预览

注意：1. 文件地址必须公网；2. 静态资源不要有访问权限

// HTML
<iframe
    :src="previewUrl"
    frameborder="0"
    width="100%"
    height="600"
    border='0'
    marginwidth='0'
    marginheight='0'
    scrolling='no'
    allowtransparency='yes'/>
        
 // JS
 previewModel(url) {
  const index = url.lastIndexOf('.')
  url = url.indexOf('http') !== -1 ? url : this.imgDomain + url // 检验下返回的地址有没有含有http或者https
  const text = url.substr(index)
  if (text.lastIndexOf('.word') !== -1 || text.lastIndexOf('.xls') !== -1 || text.lastIndexOf('.ppt') !== -1) {
     this.previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${url}`
   } else {
     this.previewUrl = `${url}`
   }
 },
   

2.使用embed标签

embed标签跟iframe标签相似，embed标签对Word、Xls、PPT文件时不用拼微软的解析地址，但是遇到DOC文件就直接下载了

注意：PDF可预览但DOC就直接下载了，具体根据需求调试

// HTML
<embed
  :src="previewUrl"
  type="application/pdf"
  width="100%"
  height="800px">
      
 // JS
  previewModel(url) {
  url = url.indexOf('http') !== -1 ? url : this.imgDomain + url // 检验下返回的地址有没有含有http或者https
  this.previewUrl = `${url}` // embed 标签使用
 },