vue 根据url预览或下载文件

预览是通过浏览器属性去实现的，谷歌内核的都支持

file数据格式

{
   "fileId": "78b60bdfd5ed4b40b61cd75ba7d85e57",
   "fileName": "icon_001.png",
   "filePath": "http://localhost:8182/2024/20240329/78b60bdfd5ed4b40b61cd75ba7d85e57.png",
   "fileType": "png",
   "nodeId": "node01",
   "createTime": "2024-03-29 13:59:52",
   "isLocal": "0"
}

js方法

/**
  * 图片及pdf文件直接预览，其他格式文件直接下载
  * @param file
*/
clickFile(file) {
  let fileType = file.fileType.toLowerCase()
  if (fileType === 'pdf' || fileType === 'jpg' || fileType === 'png') {
    let a = document.createElement('a')
    a.target = '_blank'
    a.href = file.filePath
    a.click()
  } else {
    fetch(file.filePath)
      .then((res) => res.blob())
      .then((blob) => {
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = file.fileName
        document.body.appendChild(link)
        link.click()
        window.URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      })
  }
}

使用方法

<div class="custom-file-div-text" title="点击预览" @click="_this.$myUtil.clickFile(item)">
	{{ item.fileName }}
</div>