vue下载导出excel文件

vue下载excel文件( .xls .xlsx)

1. 直接上代码

<template>
	<div>
		{{message}}
	</div>
</template>
<script>
  // 导入接口  后面 会讲
  import { exportBuyerOrderList } from '@/getData'
  export default {
    name: 'buyerStatisticsList',
    data() {
      return {
      	message: "黑黑黑"
       }
    },
    methods: {
      // 我这里使用的是 async await 结合 Promise 使用axios请求后面我会附代码
	  async exportFile() {
		// res 是 请求响应的 excel 的二进制数据流
	    const res = await exportBuyerOrderList(
		    {
		      userId: "123", // 请求接口传参
		      name: "名称",	 // 请求接口传参
		    }, 
		    {
		      responseType: 'arraybuffer' // 响应类型
		    }
	    )
	    let filename = "excel表格.xls";
	    this.fileDownload(res, filename); // 调用下面fileDownload方法
	  },
	  // 保存 excel 文件
	  fileDownload(data, fileName) {
	  	// 这里 data 就是后台响应的二进制数据流
	    let blob = new Blob([data], {
	      type: "application/octet-stream"
	    });
	    // 没有指定下载的名称 默认filename.xls
	    let filename = fileName || "filename.xls";
	    // 有 msSaveBlob  直接保存
	    if (typeof window.navigator.msSaveBlob !== "undefined") {
	      window.navigator.msSaveBlob(blob, filename);
	    } else { // 没有
	      // 创建 blobURL 
	      var blobURL = window.URL.createObjectURL(blob);
	      // 创建 a 标签
	      var tempLink = document.createElement("a");
	      // 隐藏 a 标签
	      tempLink.style.display = "none";
	      // 设置 a 标签 href 连接
	      tempLink.href = blobURL;
	      // 设置 a 标签属性为 download (下载文件)
	      tempLink.setAttribute("download", filename);
	      if (typeof tempLink.download === "undefined") {
	        tempLink.setAttribute("target", "_blank");
	      }
	      document.body.appendChild(tempLink);
	      tempLink.click();
	      document.body.removeChild(tempLink);
	      window.URL.revokeObjectURL(blobURL);
	    }
	  },
    },
  }

</script>

接口文件 getData.js

// 单独创建 一个 js 文件 保存所有的接口 (我这个叫 getData.js)
// 引入 fetch.js 
import fetch from '@/config/fetch'
/**
 * 订单中心 / 订单管理 / 买家订单导出
 */
export const exportBuyerOrderList = (data,param) => fetch('wxsupplier/supplierProvider/exportBuyerOrderList', data,param);

axios请求封装 fetch.js

// 再 单独创建一个 
import axios from "axios";

/**
 * 设置 所有 axios 请求携带数据 序列化(非 必须操作 看后台 请求传参需求)
 */
axios.defaults.transformRequest = [function (data) {
  return qs.stringify(data);
}];

/**
 *  封装 axios 请求 我这里 只做了 get 请求 和 post 请求 自己添加 put delete 请求
 */
export default async (url = '', data = {}, parame = {},type = 'POST', method = 'fetch') => {
  if (type == 'GET') {
    let dataStr = ''; //数据拼接字符串
    Object.keys(data).forEach(key => {
      dataStr += key + '=' + data[key] + '&';
    })

    if (dataStr !== '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
      url = url + '?' + dataStr;
    }
  }
  if (window.fetch && method == 'fetch') {
    return new Promise((resolve, reject) => {
      axios.post(url, data, parame).then(res => {
        if (res.status === 200)
          resolve(res.data)
        else
          console.log("响应状态码 不等于 200");
      }).catch(error => {
        reject(error)
      })
    })
  }
}