axios js 下载文件 Axios 下载文件Axios下载文件axios下载文件axios下载文件 vue下载文件VUE下载文件

下载文件接口 用 window.open() 也可以实现，但是无法鉴权，携带token等信息

这种方式只适用于简单下载，开发者是知道文件类型的，例如xlsx、.mp3

简单下载

     axios.get("/url", { responseType: "blob" })
            .then((res) => {
              console.info('请求 blob结果', res.data)
              // 创建一个临时的url，参数为blob对象
              let url = window.URL.createObjectURL(res.data); 
              let a = document.createElement("a");
              a.href = url;
              a.download = "你所起的文件名.mp3";
              a.click();
              // 释放这个临时的对象url
              window.URL.revokeObjectURL(url);
       }).catch((err) => {});

请求带参数 下载

     axios({
            'url': '/url',
            'params': {'a': 1, 'b': 2},
            'method': 'GET',
            'responseType':'blob' })
            .then((res) => {
               console.info('请求 blob结果', res.data)
              // 创建一个临时的url，参数为blob对象
              let url = window.URL.createObjectURL(res.data); 
              let a = document.createElement("a");
              a.href = url;
              a.download = "你所起的文件名.mp3";
              a.click();
              // 释放这个临时的对象url
              window.URL.revokeObjectURL(url);
      }) .catch((err) => {});

自动识别blob文件类型

      let fileName = '起风了'  // 文件名设置: 起风了
      // eslint-disable-next-line no-unused-vars
      axios({
        'url': '/url',
        'method': 'get',
        'responseType': 'blob',
      }).then((res) => {
        console.info('请求 blob结果', res.data)
        
        let blobType = 'application/force-download' // 设置blob请求头
        
        let blob = new Blob([res.data], {type: res.data.type}) // 创建blob 设置blob文件类型 data 设置为后端返回的文件(例如mp3,jpeg) type:这里设置后端返回的类型 为 mp3
        
        let downa = document.createElement('a') // 创建A标签
        
        let href = window.URL.createObjectURL(blob) // 创建下载的链接
        
        downa.href = href // 下载地址
        downa.download = fileName // 下载文件名
        document.body.appendChild(downa)
        downa.click() // 模拟点击A标签
        document.body.removeChild(downa) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放blob对象
        
      }).catch(function (error) {
        console.log(error)
      })

简单Demo

    /**
     * 下载文件
     * @param url 文件接口地址
     * @param fileName 文件名称
     * @return 返回一个Promise对象
     */
    async downFile(url, fileName) {
    	return new Promise((resolve, rejected) => {
	        axios.get(url, { responseType: "blob" }).then((res) => {
	            console.info('请求 blob结果', res.data)
	            let url = window.URL.createObjectURL(res.data); // 创建一个临时的url，参数为blob对象
	            let a = document.createElement("a");
	            a.href = url;
	            a.download = fileName;
	            a.click();
	            // 释放这个临时的对象url
	            window.URL.revokeObjectURL(url);
	            resolve()
	        }).catch((err) => {
	        	console.error('下载文件异常，原因：', err)
	        	rejected()
	        });
		})
    },
    async TestDown(){
       await downFile('http://test.api/getFile', '测试文件.txt')
   },

同时处理 JSON和BLOB

大多数情况都是会把下载请求的方法封装起来全局使用，有些时候难免会出现有异常下载请求，这时候需要把异常消息给显示出来，但是固定使用 responseType: "blob" 只能处理blob，无法处理json等请求返回数据，这时候就需要使用 arraybuffer

示例

axios({
      url: `www.hhhh.com`,
      method: 'GET',
      responseType: 'arraybuffer'
    }).then((res) => {
      // 响应类型
      const contentType = res.headers['content-type']
      
      // 处理 JSON 数据
      if (contentType.includes('application/json')) {

            const jsonData = JSON.parse(Buffer.from(res.data).toString('utf-8'))
            console.log('处理 JSON Data:', jsonData)
          
      } else {
         
            // 处理 Blob 数据
            constblobData = new Blob([res.data], { type: res.headers['content-type'] })
            const toUrl = window.URL.createObjectURL(blobData) // 创建一个临时的url指向blob对象
            const a = document.createElement('a')
            a.href = url
            a.download = fileName
            a.click()
            // 释放这个临时的对象url
            window.URL.revokeObjectURL(url)
          
      }
    }).catch((error) => {
    })