链接下载之后发现文件类型没有如何解决？

情景：

        当后端传过来的数据给你传递如下的格式数据字段

        name:下载之后的文件名称数据

        prefixPath+relativePath:需要进行拼接的链接地址

接口返回字段

当直接使用window.open()下载到本地的时候，会发现这个文件没有相应的文件类型，而且文件名称还是乱的

下载到本地文件

要是想要显示他的内容，就得手动添加他的后缀名。

但是它上面的文件名称后缀和extension字段有他的文件类型、displayName是文件的名称，所以，我就用下面拼接好的name数据进行文件重命名

为了实现链接下载到本地的时候能够不用手动修改他的文件类型，我们可以使用axios或者fetch进行文件下载

当用户点击"点击下载文件"按钮时，downloadFile方法会被触发。

首先，我们使用axios库发送GET请求来下载文件。我们指定响应的数据类型为blob，这样可以获取到文件的二进制数据。

然后，我们创建一个Blob对象，它接受两个参数：文件内容和文件的MIME类型。其中，response.data是服务器返回的文件二进制数据，response.headers['content-type']是服务器返回的文件类型。

接下来，我们创建一个FileReader对象，用于读取文件内容。

然后，我们设置reader.onload回调函数，当文件读取完成时，会自动调用该函数。在回调函数中，我们获取文件内容event.target.result。

接着，我们定义了新文件的文件名filename（不包含扩展名）和文件扩展名extension。

之后，我们创建一个新的Blob对象，它接受两个参数：文件内容和文件的MIME类型。这次我们使用application/octet-stream作为MIME类型，表示二进制文件。

然后，我们创建一个<a>标签，并将新文件的下载链接绑定到href属性上，通过window.URL.createObjectURL()方法生成下载链接。

接着，我们设置download属性，将新文件的文件名和扩展名赋值给它。

最后，我们调用link.click()方法触发下载操作，用户将开始下载带有新文件名和扩展名的文件。

注意，在下载完成后，浏览器会自动释放通过window.URL.createObjectURL()方法创建的URL对象。

这样，就实现了将链接地址下载到本地，并修改文件名称和类型的功能。

//首先引入axios
import axios from 'axios'

设置文件点击下载的方法名称是downFile(item)

    // 获取要下载的文件内容信息
    async downFile(item) {
      const { name, prefixPath, relativePath } = item
      const fileUrl = prefixPath + relativePath// 文件的下载链接
      const fileName = name //包含了文件名称和文件类型了
      console.log('data地址名:', fileUrl, '文件名:', fileName);
      const response = await axios.get(fileUrl, { responseType: 'blob' })
      const blob = new Blob([response.data], { type: response.headers['content-type'] }) // 创建Blob对象
      const reader = new FileReader()
      reader.onload = (e) => {
        const fileContent = e.target.result
        const newBlob = new Blob([fileContent], { type: 'application/octet-stream' }) // 创建新的Blob对象
        const link = document.createElement('a')// 创建<a>标签
        link.href = window.URL.createObjectURL(newBlob)// 绑定新文件的下载链接
        link.download = fileName// 设置新文件的文件名和扩展名
        link.click() // 触发下载
      }
      reader.readAsArrayBuffer(blob)// 以ArrayBuffer读取Blob对象
    },

然后就发现本地下载成功了