Vue项目前端或后台实现导出报表

一、后台导出
        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链接直接下载

1.2 使用iframe下载

1.3 axios请求后使用blob下载

提示：
这里一定要注意设置：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
}

//调用

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

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

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

import JsonExcel from 'vue-json-excel'       //在全局main.js中导入引用
Vue.component('downloadExcel', JsonExcel)