后端返回的文件流进行文件预览

原创已于 2024-04-26 09:27:42 修改 · 998 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2024-04-26 09:19:15 首次发布

该篇文章介绍了如何在JavaScript中定义一个方法，接收接口返回的文件流，根据文件类型（如PDF、JPEG、PNG等）转换MIME类型，并利用`URL.createObjectURL`和`Blob`创建可预览的链接，以实现文件预览功能。

接口返回的文件流进行预览处理

methods: {
    openImg(url) {
      preview({fileUrl: url}).then((res) => {
        let type = url.substring(url.lastIndexOf('.') + 1, url.length).toLowerCase()
        let docType = 'application/pdf'
        if (type == 'gif') {
          docType = 'image/gif'
        } else if (type == 'jpeg' || type == 'jpg') {
          docType = 'image/jpeg'
        } else if (type == 'png') {
          docType = 'image/png'
        }
        let binaryData = []
        binaryData.push(res)
        let pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: docType })
        )
        window.open(pdfUrl)
      })
    }
}