一、后台导出
        1.1 使用a链接直接下载
        1.2 使用iframe下载
        1.3 axios请求后使用blob下载
        1.4 方法二: 如果项目中封装了axios
        1.4.1使用file-saver
        1.4.2使用a链接 
        1.4.3调用
二、前台导出
        2.1使用插件——vue-json-excel

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

一、后台导出

  • 后端导出指的是，后端已经封装好二进制流，前端只需要做的就是请求接口和下载；通常使用在数据量比较大的情况下；
  • 在写其他代码之前一定测试接口是否正常；

例如接口：http://197.23.46.97:8088/exprotExcel，
参数：type:'exprot',name:'excel002'，get请求，
直接访问接口路径：http://197.23.46.97:8088/exprotExceltype=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

        1，api.js(封装api的文件)

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

        2，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;

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

npm install vue-json-excel   //安装依赖

import JsonExcel from 'vue-json-excel'       //在全局main.js中导入引用
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"
        性别:{    //如果数据需要处理也可以使用回调函数的方式
          field: "sex",
          callback: sex => {
            return sex===0?'女':sex===1?'男':'未知';
          }
        },
      }
    };
  },
};
</script>

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue