vue项目中实现前台导出和后台导出Excel或其他类型文件的方法合集

前言

此篇记录一下导出功能，分为后端导出和前端导出；网上都有很多方法了，特整理记录一下，方便之后查阅；

正文

一、后台导出

后端导出指的是，后端已经封装好二进制流，前端只需要做的就是请求接口和下载；通常使用在数据量比较大的情况下；

• 在写其他代码之前一定测试接口是否正常；
• 例如接口：http://197.23.46.97:8088/exprotExcel，参数：type:'exprot',name:'excel002'，get请求，正常流在浏览器中直接访问接口路径http://197.23.46.97:8088/exprotExcel?type=exprot&name=excel002会直接下载文档；

1.1 使用a链接直接下载

代码如下：

<template>
  <div>
    <!-- 1.1.1 使用a链接无参数直接下载 -->
    <a :href="exportUrl" target="_block">导出</a>
     <!--1.1.2 使用a链接有参数直接下载 -->
    <a :href="exportByhrefUrl" target="_block">导出</a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exportUrl: "http://197.23.46.97:8088/exprotExcel",
      form: {}
    };
  },
  computed: {
    exportByhrefUrl(){
        let url = "http://197.23.46.97:8088/exprotExcel";
        if (this.form.type) url = url + "?type=" + this.form.type;
        if (this.form.name) url = url + "&name=" + this.form.name;
        return url
    }
  },
</script>

1.2 使用iframe下载

代码如下：

<template>
  <div>
    <!-- 1.2 使用iframe下载 -->
    <button @click="exportExcel">导出</button>
    <iframe :src="exportUrl" style="display:none"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exportUrl: "",
      form: {}
    };
  },
  methods: {
    exportExcel() {
      // 1.不使用代理的情况
      let url = "http://197.23.46.97:8088/exprotExcel";
      // 2.使用vue代理有参数的情况
      let url2 = "/api-proxy/exprotExcel";
      if (this.form.type) url = url + "?type=" + this.form.type;
      if (this.form.name) url = url + "&name=" + this.form.name;
      this.exportUrl = url;
    },
  }
};
</script>

1.3 axios请求后使用blob下载

代码如下：

<template>
  <div>
    <!-- 1.3 使用axios/ajax请求数据后使用blob下载 -->
    <button @click="exportExcelByAxios">导出</button>
  </div>
</template>
<script>
import axios from axios
export default {
  data() {
    return {
      exportUrl: "",
      form: {}
    };
  },
  methods: {
    exportExcelByAxios() {
      let url = "/api-proxy/exprotExcel";
      axios.get(url, {params:this.form}, { responseType: "blob" }).then(res => {
          const fileName = "测试表格123.xls";
          //   res.data:请求到的二进制数据 
          const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); //1.创建一个blob
          const link = document.createElement("a"); //2.创建一个a链接
          link.download = fileName; //3.设置名称
          link.style.display = "none"; // 4.默认不显示
          link.href = URL.createObjectURL(blob); // 5.设置a链接href
          document.body.appendChild(link);//6.将a链接dom插入当前html中
          link.click();//7.点击事件
          URL.revokeObjectURL(link.href); //8.释放url对象
          document.body.removeChild(link); //9.移除a链接dom
      });
    }
  }
};
</script>

提示：

• 这里一定要注意设置：responseType: "blob"；
• 这种方法原理是使用JS的内置对象Blob，Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。MDN关于Blob语法和介绍。
• 如果你想下载不是excel格式的文件，只用修改new Blob([res.data], { type: "application/vnd.ms-excel" })中type类型，比如下载word文件：

  const blob = new Blob([res.data], { type: "application/msword" });
  

• 附： 常见的MIME 类型列表

1.4 方法二: 如果项目中封装了axios

• request.js（封装axios的文件）

import axios from "axios";
const TIMEOUT = 30000; // 接口超时时间

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 请求的基础链接，在环境变量文件中定义
  timeout: TIMEOUT, // 超时
  withCredentials: true,//携带cookie
  headers: {
    "Content-Type": "application/json;charset=UTF-8"
  }
});
/* 在实例已创建后修改请求头内容默认值 */
instance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
instance.interceptors.response.use(
  response => {
    let contentType =
      response.headers["content-type"] || response.headers["Content-Type"];
    // 判断后端是否返回的数据流，如果是数据流，则将整个响应返回，因为需要从header中取文件名
    if (contentType.indexOf("application/octet-stream") > -1) {
      return response;
    } else {
      return response.data;
    }
  },
  error => {
    console.error(error);
    return Promise.reject(error);
  }
);

export default instance;

• api.js(封装api的文件)

import request from '@/utils/request'
export function exportExcelByAxios(data) {
  return request({
    url: '/api-proxy/exprotExcel',
    method: 'POST',
    data,
    responseType: 'blob',
  })
}

1.4.1使用file-saver

npm install  file-saver -s

import { saveAs } from 'file-saver'
export function exportBlobToExcel(res, f) {
  const contentDisposition =
    res.headers['content-disposition'] || res.headers['Content-Disposition']
  const filename =
    (contentDisposition && contentDisposition.split('=')[1]) || f || ''
  // 实例化一个blob对象
  const blob = new Blob([res.data], { type: 'text/plain;charset=utf-8' })
  // 将blob保存为excel文件
  saveAs(blob, filename)
}

1.4.2 使用a链接

export function download(response) {
  const blob = new Blob([response.data], {
    type:
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
  })
  const contentDisposition =
    response.headers['content-disposition'] ||
    response.headers['Content-Disposition']
  const filename =
    (contentDisposition && contentDisposition.split('=')[1]) || f || ''
  if (!filename) return
  const link = document.createElement('a') //2.创建一个a链接
  link.download = filename //3.设置名称
  link.style.display = 'none' // 4.默认不显示
  link.href = URL.createObjectURL(blob) // 5.设置a链接href
  document.body.appendChild(link) //6.将a链接dom插入当前html中
  link.click() //7.点击事件
  URL.revokeObjectURL(link.href) //8.释放url对象
  document.body.removeChild(link) //9.移除a链接dom
}

调用

<template>
  <div>
    <button @click="exportExcelByAxios">导出</button>
  </div>
</template>
<script>
import {exportBlobToExcel,download} from './export.js'
import {exportExcelByAxios} from './api.js'
export default {
  methods: {
    exportExcelByAxios() {
      exportExcelByAxios({data:'参数'}).then(res=>{
      	exportBlobToExcel(res)//使用file-saver
      	 //#or
      	download(res)//使用a 链接
      })
  },
};
</script>

二、前台导出

前台导出指的是：前端直接导出数据，不经过后台处理，在数据量小的情况下，也很方便处理；

2.1使用插件——vue-json-excel

在main.js中导入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

页面代码如下：

<template>
  <div>
    <!-- 2.1前台导出，双向绑定数据 -->
    <download-excel
      :data="tableData"
      :fields="json_fields"
      :name="excelName"
    >
      <button>导出EXCEL</button>
    </download-excel>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //报表名称
      excelName:'数据报表.xls',
      //数据列表
      tableData: [
      	{id:01,name:'测试数据1',amountNum:99,amountPrice:500},
      	{id:02,name:'测试数据2',amountNum:30,amountPrice:100},
      ],
      //导出的列的key和名称
       json_fields: {
        序号: "id",
        名称: "name",
        数量: "amountNum",
        金额: "amountPrice"
      }
    };
  },
};
</script>

2.2 使用插件 ——file-saver

我习惯用上一种方法，我觉得比较简单好用的，file这种网上也有很多人介绍的很详细，就不再水文章了，详情可以参考：【js-xlsx和file-saver插件】前端导出数据到excel

结语

这种功能在我们开发中还是很常见的，记录一下方便以后查阅；这是在vue中的写法同理在原生中也可以这样写。只是语法有改变；
over~
如果本文对你有帮助的话，请不要忘记给我点赞评论打call哦~o(￣▽￣)ｄo