vue后台导出文件提示，根据后台返回的Content-Type类型导出文件或提示消息

Posted 2022-08-16 棉晗榜

目录

• • vue全局request.js封装
  • 调用封装：导出excel
  • C#后台导出文件处理，返回文件流，有消息返回提示消息

vue全局request.js封装

import axios from "axios";
import Qs from 'qs'
import  Loading, Message  from "element-ui";
import  API_ROOT, REQUEST_TIMEOUT, DEBUG  from "@config";
import router from "@router";

let loadingInstance; //加载

/**
 * 创建一个axios实例
 */
const service = axios.create(
  baseURL: API_ROOT, // 请求地址
  timeout: REQUEST_TIMEOUT, // 请求超时
  // withCredentials: true, // 在跨域请求时发送cookie

  // 请求参数的格式
  headers: 
    "Content-Type": "application/json",
    // "Content-Type": "application/x-www-form-urlencoded",
  ,
);

/**
 * 请求拦截器
 * 在请求发送之前做什么
 */
service.interceptors.request.use(
  (config) => 

    // 加载层, 默认开启
    if (!config.headers.isLoading)
      loadingInstance = Loading.service(
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      );

     

    if (sessionStorage.getItem("token")) 
      // 让每个请求都带有令牌，请根据实际情况修改
      config.headers.token = sessionStorage.getItem("token");
    

    // post 请求时拼接参数
    if (config.method == 'post') 
      config.url = config.url + '?' + Qs.stringify(config.data)
    

    return config;
  ,
  (error) => 
    // 请求错误时做了什么  
    return Promise.reject(error);
  
);

/**
 * 响应拦截器
 * 如果您想获得http信息，如头信息或状态
 */
service.interceptors.response.use(
  (response) => 
    const res = response.data;

    // token过期，重新登录
    if (res.data == 'login_time_out7584') 
      router.replace('/login');
    


    // 加载层清除
    if (loadingInstance) loadingInstance.close();

    /**
     * 通过自定义代码确定请求状态
     * 这里只是一个例子
     * 您也可以通过HTTP状态码来判断状态
     */
    switch (response.status) 
      case 200:   
        //后台导出文件消息提示     
        if(response.config.responseType === "blob" && res.type=="text/html") 
          var utf8decoder = new TextDecoder();
          var fr = new FileReader();
          fr.readAsArrayBuffer(res);
          fr.onload = function(res) 
            var buffer = fr.result;           
            var text = utf8decoder.decode(buffer);//String            
            Message.error(text);
          
          return res;
        

        //下载文件
        if (res.type === "application/octet-stream")          
          return handleResponse(response);
         else if (res.code != 500) 
          return res;
         else            
          Message.error(res.errorMessage || "接口出错！");
          return res;
        

      case 401:
        Message.error("401，未登录！");
        sessionStorage.clear();
        break;

      case 404:
        Message.error("404，接口不存在！");
        break;

      case 500:
     /*    if (res.data.indexOf("Proxy error") != -1) 
          Message.error("请确认webapi接口服务能正常访问");
          break;
         */
        Message.error("500，内部服务器错误！");
        break;

      default:
        Message.error("网络错误，请稍后重试！");
    

    return Promise.reject(new Error(res.message || "Error"));
  ,
  (error) => 
    // 加载层清除
    if (loadingInstance) loadingInstance.close();
    if (error && error.response) 
      switch (error.response.status) 
        case 400:
          error.message = "请求错误";
          break;
        case 401:
          error.message = "未授权，请重新登陆";
          break;
        case 403:
          error.message = "拒绝访问";
          break;
        case 404:
          error.message = "未找到";
          break;
        case 500:
          error.message = "服务器错误";
          break;
        case 503:
          error.message = "请求未完成";
          break;
      
     else 
      error.message = "服务器连接失败";
    
    Message(
      type: 'error',
      message: error.message
    )
    
    return Promise.reject(error);
  
);

/**
 * 处理响应的二进字数据
 * @param * response
 */
function handleResponse(response) 
  /**
   * 从响应头获取文件名称
   * 后端返回的文件名称为十六进制
   */
  var name=response.headers["content-disposition"].split(";")[1];
  const fileName =name.replace("filename=","");
  try 
    const blob = new Blob([response.data]);     
    var a = document.createElement('a');
    var urlTemp = URL.createObjectURL(blob);
    a.href = urlTemp;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(urlTemp);
   catch (e)  
    //console.log(772,e);
  


export default service;

调用封装：导出excel

/**
 * 样本导出 
 * @param object params
 */
 export async function exportFile(params) 
    try 
        //responseType: 'blob',
      var res= await API.get("/api/order/ExportEXCEL_PageOfOrderList",params,responseType:"blob");
     catch (error) 
        console.log(113,error);
        return error;
    

C#后台导出文件处理，返回文件流，有消息返回提示消息

/// <summary>
/// 导出样本查询结果
/// </summary>
/// <param name="selectWhereStr">查询条件</param>
/// <returns></returns>
[TokenFilter]
[HttpGet("ExportEXCEL_PageOfOrderList")]
public async Task<ActionResult> ExportEXCEL_PageOfOrderList([FromQuery] SelectWhere selectWhereStr)
        
	var result = await mq_DataDisposeBusiness.GetPageOfOrderList(selectWhereStr, 1, 10000);
	string empty_msg = "导出内容不能为空";
	if (result.Code != ResultEnum.Success)
	
		if (result.ErrorMessage.Equals("未找到数据"))
		
			return Content(empty_msg, "text/html;charset=UTF-8");
		
		return Content(result.ErrorMessage, "text/html;charset=UTF-8");
	
	if (result.Payload.Total == 0)
	
		return Content(empty_msg, "text/html;charset=UTF-8");
	

	//生成EXCEL文件
	List<List<object>> exportData = new List<List<object>>();

	string columName = "条码号,样本类型,检测时间,科室名称,智能分类建议,溶血(mol/L),黄疸(mol/L),乳糜(mol/L),用户反馈";

	foreach (var item in result.Payload.List)
	
		var row = new List<object>();
		row.Add(item.OrderId);
		row.Add(item.OrderTypeName ?? "其它");//样本类型
		string time = "";
		if (item.OrderCreateTime.HasValue)
		
			time = item.OrderCreateTime.Value.ToString("yyyy-MM-dd HH:mm:ss");
		
		row.Add(time);//检测时间
		row.Add(item.Department);//科室名称
		row.Add(item.ResultStr);//智能分类建议
		row.Add(item.HNum.HasValue ? item.HNum.ToString() : "--");//溶血(mol/L)
		row.Add(item.INum.HasValue ? item.INum.ToString() : "--");//黄疸(mol/L)
		row.Add(item.LNum.HasValue ? item.LNum.ToString() : "--");//乳糜(mol/L)
		row.Add(item.UserLable);//用户反馈
		exportData.Add(row);
	

	string fileName = "样本查询" + DateTime.Now.Ticks + ".csv";
	string downUrl = $"/ CommonNameValueConfig.ExportDir/" + fileName;
	string path = AppDomain.CurrentDomain.BaseDirectory + System.IO.Path.Combine(CommonNameValueConfig.ExportDir, fileName);
	WebAPI_Serum.Model.CsvHelper.ExportMakeCsv(exportData, path, "样本导出", columName);

	return PhysicalFile(path, "application/octet-stream", fileName);