欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端下载文件功能实现

程序员文章站 2022-05-13 10:00:57
...

若后端的导出下载接口时post类型则前端实现
1、先在请求的时候使用isBlob对后端传来的二进制流进行处理,则在请求的时候的需要在请求头部加多一行代码

const updowm = (params = {}) => {
  return request({
    url: '',
    method: 'post',
    data: params,
    responseType: 'blob',//加多此行
  })
};

2、封装公共导出方法

// file:文件流;
//excelName:文件名称
export default function templateDownload(file, excelName) {
  const url = window.URL.createObjectURL(new Blob([file.data]))
  if (window.navigator.msSaveOrOpenBlob) { 
    window.navigator.msSaveOrOpenBlob(file.data, `${excelName}.xls`)
  } else {
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', `${excelName}.xls`)
    document.body.appendChild(link)
    link.click()
  }
}

3、vue中的使用

<template>
 <div class='export'>
   <button @click='templateDownload'>模板下载</button>
 </div>
</template>
<script>
import exportExcel from 'exportExcel',
export default {
 methods:{
 templateDownload() {
      templateDownload(param).then(res => {
        exportToExcel(res, 'excelName')
      })
    },
  }
}
</script>