JS下载或导出文件的三种方法

最新推荐文章于 2024-08-19 11:16:23 发布

昨天的梦5

最新推荐文章于 2024-08-19 11:16:23 发布

阅读量1.3k

点赞数

分类专栏：开发文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43842488/article/details/123061915

版权

开发专栏收录该内容

9 篇文章 1 订阅

订阅专栏

这篇博客介绍了三种不同的前端文件下载方法：使用axios通过POST请求下载，利用form表单触发下载，以及直接通过a标签创建链接下载。示例代码详细展示了每种方法的实现过程，适用于不同场景的文件导出需求。

摘要由CSDN通过智能技术生成

方案1使用axios请求后端接口

// 假设在一个列表里面选中行，单个或多个，选中
handleEmplabelExport (selectRow) {
  let employeeIds = selectRow.map(item => item.employeeId)
  let params = {
    employeeIds: employeeIds || null,
    ...this.searchForm
 }

  /* 下载方案1 */
  axios({
    method: 'post',
    url: '/emp/employee/export/empLabel', // 请求地址
    data: params, // 参数
    responseType: 'blob'
  }).then(res => {
    // let newName = name
    // 处理返回的文件流
    const content = res.data
    const blob = new Blob([content], { type: 'application/octet-stream;charset=ISO8859-1' })
    console.log(res.headers)
    const fileName = decodeURIComponent((res.headers['content-disposition']).split('filename=')[1])
    // const fileName = newName
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  })
}

方法2，使用form表单下载

  /* 下载方案2 */
  let form = document.createElement('form')
  form.style.display = 'none'
  form.action = '/backend/emp/employee/export/empLabel'
  form.method = 'post'
  document.body.appendChild(form)
  for (let key in params) {
    let input = document.createElement('input')
    input.type = 'hidden'
    input.name = key
    input.value = params[key]
    form.appendChild(input)
  }
  form.submit()
  form.remove()

方法3，直接用a标签导出

/* 下载方案3 */

  if (selectRow.length === 0) {
     this.$message.error('请选择员工再导出员工标签')
     return false
   }
   let employeeIds = selectRow.map(item => item.employeeId).join(',')
   const el = document.createElement('a')
   document.body.appendChild(el)
   el.href = `/backend/emp/employee/export/empLabel/${employeeIds}/excelZip`
   el.click()
   document.body.removeChild(el)