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

三种方法"/>

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

方案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.dataconst 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 = newNameif ('download' in document.createElement('a')) {// 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.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 = keyinput.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)