方法一:

一、后台管理系统中常有导出excel功能,可定义一个函数,在其他.vue文件中导入即可用。

   1.1定义函数


  export function excelDown(res, name = "模版文件.xlsx", type) {
    var typ =
      type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    var blob = new Blob([res], { type: typ });
    var downloadElement = document.createElement("a"); //创建a标签
    var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;  
    downloadElement.download = name; //导出时的文件名 例:商品包管理.xlsx
    document.body.appendChild(downloadElement);
    downloadElement.click();   //触发点击事件
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
  }

    1.2 定义接口函数

export const get_content_export = p =>
  get(server + "/content-info/export" ,p,{responseType:'blob'}) 

       //此处的get为已封装好的get请求函数           //请求要带上 {responseType:'blob'} 

二、引入

import { excelDown } from "@/util/utils";  //从excelDown函数文件路径引入 
import { get_content_export } from "@/server/api/server"  //导入接口

三、使用

    3.1 无导出限制条件时

//导出
handleExportFile(){
   let params = {****}  //请求参数
   get_content_export(params).then(res=>{
     this.$message.success("导出成功")
     excelDown(res,"媒资管理.xlsx") // 传入文件流(res),文件名即可
 }).catch(err=>{
    this.$message.error(err)
    console.log(err);
 })

}

3.2 有导出限制条件时(需要借助 FileReader对象读取导出失败时返回的信息)

//导出(假设:导出的数据超过1w条时前端页面提示最多导出1w条数据,少于1w条正常导出)
handleExportFile(params).then(res=>{
  let that = this 
  //导出数据超过1w条
  if (res.data.type === 'application/json'){
    const reader = new FileReader() // 读取文件内容
    reader.onload = function (event) {  //文件读取成功触发
      const message = JSON.parse(reader.result)  //返回文件内容
      that.$message.error(message.msg) 
      /*console.log(reader.result);   '{"code":"400","msg":"一次导出媒资记录最大为1w 
      条!","success":false}' */
    }
    reader.readAsText(res.data) //将文件读取为文本
  }else{ //少于等于1w条,正常导出
     excelDown(res.data,'媒资管理.xlsx')
   }           
 }).catch(err=>{
    this.$message.error(err)
 })

方法二:使用window.location.href 

handleExportFile(){
  try{
    window.location.href = `服务名/接口?params1=${}&params2=${}&params3=${}` //参数拼接 
  }catch(err){
    this.$message.error(err)
  }
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐