前端实现导出

前端实现导出的有两种实现方式
1、通过前端重定向，使用浏览器自身导出功能。直接使用后台的链接。通过window.localton.href实现文件的导出。

2、通过Blob文件流的形式通过，接口请求实现文件的导出。

重点说一下第二种的代码实现方式

首先，在封装的请求接口中，要谨记添加responseType:'blob'.

export const getExportFile = (url.params)=>{
 return axios({
    url:url,
    data:params,
    methds: 'post,
    responseType:'blob',
    headers:{
        "Content-Type":"application/json;charset=utf-8",
    }
 })
}

封装导出代码：

/**
* url 请求路径
* fileName 文件名称(需要后缀)
* params  参数
*/


export const handleFile=(url,fileName,params)=>{
  return getExportFile(url,params).then(res)=>{
  if(res.size==0){
    Vue.prototype['$message'].warning('数据为空，请重新筛选数据')
    return 
  }
   // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
   const blob = new Blob([res],{ type:'charset=utf-8' }) 
   // 兼容ie和360浏览器
  if(window.navigator && window.navigator.msSaveOrOpenBlob){
   //  fileName需要指定后缀类型例：.doc
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  }else{
   let url = window.URL.createObjectURL(blob)
   const link = document.createElement('a')
   link.style.display = 'none'
   link.href = url
   a.setAttribute('download',fileName)
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)   // 删除节点
   window.URL.revekeObjectURL(url)  // 释放blob对象 
  }
 }
}

最后通过调用handleFile,传递url、fileNme、params 需要的参数就可以导出文件

import { handleFile } from 'XXX'

handleFile('XXXX','XXX.doc',params)

文章来源地址https://uudwc.com/A/qByRe