前端手把手教你js实现附件预览和下载得功能实现_网页附件下载改预览

在项目中，经常会遇到做项目关于实现附件预览和下载得功能，那么怎么来实现呢：

在学习之前，首先会应用到Blob相关得知识点：

那么blob到底是什么呢

先让我们看看官方关于blob得介绍

 文章来自于Blob - Web API 接口参考 | MDN (mozilla.org)

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

先让我们直接上代码： 

文件下载实现代码逻辑：

  downloadFile(file.fileId)
        .then((res) => {
          const blob = new Blob([res.data]);
          const href = URL.createObjectURL(blob);// 创建新的URL表示指定的blob对象
          const a = document.createElement('a');// 创建a标签
          a.style.display = 'none';
          // 指定下载链接
          a.href = href;
          // 指定下载文件名
          a.setAttribute('download', targetFile.name);
          a.click();// 触发下载
          URL.revokeObjectURL(a.href);// 释放URL对象
        })

file.fileId是文件id

文件预览实现逻辑：

 downloadFile(file.fileId)
      .then((res) => {
        const pdfFile = window.URL.createObjectURL(
           new Blob([res.data],{type: 'application/pdf'})
        );
        // 跳转页面预览
        window.open(pdfFile);
        URL.revokeObjectURL(pdfFile);//释放URL对象
      })

然后就可以预览和实现了