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>
    
    <a :href="exportUrl" target="_block">导出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>
    
    <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>
    
    <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 类型列表

二、前台导出

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

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

在main.js中导入

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

页面代码如下：

<template>
  <div>
    
    <download-excel
      :data="tableData"
      :fields="json_fields"
      :name="excelName"
    >
      <button>导出EXCELbutton>
    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