javascript实现文件下载

javascript实现文件下载（后端返回文件流）

封装一个通用的方法

//data为后端返回得文件流，filename为文件得名称
download(data, filename) { 
   
      let url = window.URL.createObjectURL(
      	// type属性值将影响下载文件的类型
        new Blob([data], { 
    type: 'application/x-zip-compressed' })
      )
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', filename)
      document.body.appendChild(link)
      link.click()
},

获取文件流的方法（可能不通用）

get请求

<div @click="addclick()">下载</div>
// 第一种
async addclick() { 
   
    let res = await this.$axios.get('/subject/b/template/download', { 
   
     	responseType: 'arraybuffer',
     	// 参数
        params: { 
   
          bindApplyId: '',
          templateId: 'CT211009134532594091',
          type: 1,
        },
    })
    let fileName = '文件名称.文件后缀'
    // 文件名除了可以写死之外，还可以通过后端返回过来的响应体中的content-disposition动态获取
    // Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。
    // 获取到之后进行相关的截取，转换即可
    const disposition = res.headers['content-disposition']
    // res.data 为后端返回的文件流
    this.download(res.data, fileName)
 }

// 第二种
async addclick() { 
   
	// 参数直接后缀的方式写，例如
    let res = await this.$axios.get('/subject/b/template/download?bindApplyId=''&templateId='CT211009134532594091'&type=1', Object.assign({ 
    responseType: 'arraybuffer' }))
    // 获取fileName的方法同上
    let fileName = '文件名称.文件后缀'
    const disposition = res.headers['content-disposition']
    // res.data 为后端返回的文件流
    this.download(res.data, fileName)
 }

post请求

只是请求参数的写法不一样，其它的都是一样的

async addclick() { 
   
	// 参数直接后缀的方式写，例如
    let res = await this.$axios.get('/subject/b/template/download',null,{ 
   
    	responseType: 'arraybuffer',
        params: { 
   
          bindApplyId: '',
          templateId: 'CT211009134532594091',
          type: 1,
        }
    })
    // 获取fileName的方法同上
    let fileName = '文件名称.文件后缀'
    const disposition = res.headers['content-disposition']
    // res.data 为后端返回的文件流
    this.download(res.data, fileName)
 },

type属性值

对于不同的浏览器，type属性值都略有差异，参考官方文档吧

今天的文章javascript实现文件下载分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。