超详细项目文件各种情况下的下载方式

（情况一）后端给了个下载接口，然后前端拥有文件url，返回数据格式为流

前期准备

第一：接口应该都明白易懂，就不做展示了
第二：当前已知信息只有一个资源url地址（例如：http://116.228.88.26:52800/nymanagerFile/group1/M00/00/B8/rBwWM2aGQvWAUEUFAAAzbvNDfnU23.docx）
第三：调用接口，传入url作为请求参数，请求成功后，返回的文件格式为文件流
在这里插入图片描述

开始实操

第一：我们调用接口，来啊获取文件流

//	 这里我们调用后端提供的接口，然后参数传递已知的url（file_path）
  let res = await downloadWithWatermarkFromOss({
          file_name: file.uploadFileName,
          file_path: file.uploadFileUrl
        })

调用成功，返回文件流
在这里插入图片描述
第二：再拿到文件流之后，还不能完成下载，需要对这个流文件进行一个转化，其思路就是将流文件转化为一个临时url地址，然后在通过 《A标签的href属性来下载》

我们将流文件转换一下，这里new Blob的参数格式要注意下，尤其是参数二msword的值要写对。因为不同的文件类型对应不同的值，文章结尾附上类型列表

let blob = new Blob([response], {
    
     msword: 'application/msword' });

然后我们跟进转换后的blob，创建临时url用于下载

 // 创建一个临时 URL，用于下载
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('download', fileName);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  // 释放临时 URL
  URL.revokeObjectURL(url);

到这里就结束啦！可以看到已经显示下载成功

（情况二）直接根据资源url来下载

前言：这种就是针对于没有那么多要求的，不需要后端做其他操作的
我们情况一，是因为需求要求，下载之前对源文件doc进行一个添加水印的功能，所以第一种情况我们调用了接口，拿到了增加水印的doc文档

直接创建下载链接

这里封装了一个方法，传入对应参数直接调用即可

const downLoadFile = (url, fileName) => {
    
    
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(link.href);
  document.body.removeChild(link);
}

下载成功

在这里插入图片描述

附流文件转换时，的配置参数列表（只列举常见的）

文件类型	msword对应值
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheetl
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf	application/pdf
.png	image/png
.jpeg	image/jpeg
.jpg	image/jpeg
.mp3	audio/mpeg
.txt	text/plain/pdf
.zip	application/zip