vue项目中实现文件（jpg，xls，docx等）预览

方法一：直接通过后端地址预览

handleView(record, url) {
      let fileDownloadId = 'file/download?id='
      if (url) { fileDownloadId = url }
      const originUrl = process.env.BASE_URL_TEST+ fileDownloadId + record.id //要预览文件的访问地址
      const previewUrl = originUrl + '&fullfilename=' + record.fileName 
      window.open(process.env.BASE_URL_PREVIEW+'onlinePreview?url=' + encodeURIComponent(previewUrl))
}

方法二：获取流后打开（更安全）

handleView(record) {
      const onlineList = ['png','xls','docx','jpg','pdf']
      const typeArr = record.fileName.split('.') // fileName "20101206120104.jpg"
      const type = typeArr.pop().toLowerCase() // 获取文件后缀 jpg
      if(!onlineList.includes(type)){
        this.handleDown(record) // 暂不支持打开此格式 直接下载该文件
        return
      }
      const filterType = [
        { suffix: 'png', mime: 'image/png' },
        { suffix: 'xls', mime: 'application/pdf' },
        { suffix: 'pdf', mime: 'application/pdf' },
        { suffix: 'docx', mime: 'application/pdf' } 
      ]
      const typeMine = filterType.find(item => {
        return item.suffix === type
      })
      this.$loading.show() // 下载的时候出现loading 友好交互
      this.$http.get('/file/previewUrl?id='+record.id,{ responseType: 'blob' }).then((res) => {
        if(window.navigator.msSaveOrOpenBlob) {
          //ie
          var fileData = [res.data]
          const blobObject = new Blob(fileData, { type: typeMine.mime })
          const fileName = record.fileName.substr(0, record.fileName.lastIndexOf('.'))+'.'+( (typeMine.mime=='application/pdf')?'pdf':typeMine.suffix )
          window.navigator.msSaveOrOpenBlob(blobObject, fileName)
        }else{
          const blob = new Blob([res.data], { type: typeMine.mime })
          const url = URL.createObjectURL(blob)
          window.open(url)
          URL.revokeObjectURL(url) // 释放url
        }
        this.$loading.hide()
      })
    }