Vue axios 实现文件下载

一、.net core 下载接口示例

using System;
using System.Linq;
using System.Linq.Expressions;
using System.Threading.Tasks;
using System.Collections.Generic;
using System.IO;
using System.Data;
using AutoMapper;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.StaticFiles;
using System.Text;
using System.Web;
using Newtonsoft.Json;

namespace Cari.secda.Web.Controllers
{
    /// <summary>
    /// 文件处理（导入/导出/下载）
    /// </summary>
    [Route("api/file/[action]")]
    [ApiController]
    public class FileApiController : IbpApiControllerBase
    {
        private IHostingEnvironment environment;
        private readonly IMapper mapper;
        public FileApiController(IMapper mapper, IHostingEnvironment _environment)
        {
            this.mapper = mapper;
            this.environment = _environment;
        }
        /// <summary>
        /// 下载模板文件
        /// </summary>
        /// <param name="fileType">模板类别 1：人员资质证书 2：风险基元 </param>
        /// <returns></returns>
        [HttpGet]
        public IActionResult DownloadTemplateFile(string fileType)
        {
            try
            {
                string webRootPath = environment.ContentRootPath + "\\TemplateFiles\\";
                var filePath = "";
                if (fileType == "1")
                {
                    filePath = webRootPath + "安全资格证导入模板.xlsx";
                }
                else if (fileType == "2")
                {
                    filePath = webRootPath + "风险基元库导入模板.xlsx";
                }
                var stream = System.IO.File.OpenRead(filePath);
                string fileExt = Path.GetExtension(filePath);
                //获取文件的ContentType
                var provider = new FileExtensionContentTypeProvider();
                var memi = provider.Mappings[fileExt];
                return File(stream, memi, Path.GetFileName(filePath));
            }
            catch (Exception ex)
            {
                return NotFound();
            }
        }
    }
}

二、vue axios 接口调用封装js

request.js代码示例

import axios from 'axios'
import { Message, Notification } from 'element-ui'
import Cookies from 'js-cookie'
let userToken = Cookies.get('user_token')
if(userToken === undefined || userToken === ''){
  userToken = '554db1d4-99f2-44e6-aae8-c0179896f013'
}

console.log(process.env.VUE_APP_BASE_API,'VUE_APP_BASE_API----')
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers['UserId'] = userToken

const service = axios.create({
  baseURL: 'http://192.168.1.214/secda' , // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 1000*60*5 // request timeout
})
// 请求拦截 可在请求头中加入token等
service.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
// 响应拦截 对响应消息作初步的处理
service.interceptors.response.use(
  (resp) => {
    // alert(JSON.stringify(resp))
    // console.log(resp,'-------',resp.config.responseType)
    if (resp.data && resp.config.responseType != "blob") {
      localStorage.UserId=resp.config.headers.UserId
      // console.log(resp.data)
      if (resp.data.code !== 1) {
        // console.log(resp.status)
        Message({
          type: 'error',
          message: resp.data.message || resp.data.message,
          duration: 3000
        })
      }
      return {
        code: resp.data.code,
        data: resp.data.data,
        msg: resp.data.message
      }
    } else {
      return resp.data
    }
  },
  (error) => {
    const originalRequest = error.config
    if (
      error.code === 'ECONNABORTED' &&
      error.message.includes('timeout') &&
      !originalRequest._retry
    ) {
      Message({ type: 'error', message: '请求超时，请刷新页面' })
      return Promise.reject(new Error('请求超时，请刷新页面'))
    }
    if (error.response) {
      switch (error.response.states) {
        case 400: {
          if (
            error.response &&
            error.response.data &&
            error.response.data.msg
          ) {
            Notification.error({
              title: '400错误',
              message: error.response.data.msg,
              duration: 3000,
              closable: true
            })
          }
          break
        }
      }
    }
  }
)

export default service

三、接口调用示例

common.js

import request from "@/utils/request.js";

//下载模板
export function getDownloadfile(params) {
  return request({
    url: "/api/file/downloadTemplateFile",
    method: "get",
    responseType:"blob",
    params
  });
}

四、页面代码实现

<template>
  <div>
    <el-form :inline="true"  :model="formInline" class="search-form-inline">
      <el-form-item label="风险描述:">
        <el-input v-model="formInline.Description " clearable class="el-form-item-width">
        </el-input>
      </el-form-item>
      <el-form-item label="危险源/因素:">
        <el-input v-model="formInline.Hazard" clearable class="el-form-item-width">
        </el-input>
      </el-form-item>
      <el-form-item>
		<el-button type="primary" @click="downloadfile">下载模板</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import{getDownloadfile} from "@/api/common.js";
export default {
  data() {
    return {
     formInline:{
	  Hazard:'',
	  Description:''
	 },
      tableData: [],
      total: 0,
      btnLoading: true,
      tableHeight: 680     
    };
  },
  methods: {
    //下载模板
    downloadfile(){
      //1是安全资格证导入模板，2是风险基元库导入模板
      getDownloadfile({fileType:"2"}).then((res)=>{
        let blob = new Blob([res]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = `风险基元.xlsx`; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    }
  }
};
</script>