前端下载表格

1. 文件流下载

1）封装下载函数

/**
 * @author zhudying
 * @description  文件流下载表格
 * @function exportExcel 下载函数
 * @param  response  文件流
 * @param {Array}  downTime  选择的下载时间段
 */
export function exportExcel (response) {
  // 名称 = '用户数据' + 下载数据的范围 + 当前时间 + .xlsx格式
  const fileName = '用户数据' + downTime[0] + '至' + downTime[1] + '(' + getNowTime() + ')' + '.xlsx';
  if ('download' in document.createElement('a')) { // 非IE下载
    const blob = new Blob([response], { type: 'application/xlsx' })
    const elink = document.createElement('a');
    elink.download = fileName;
    elink.style.display = 'none';
    elink.href = window.URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  }
}
// 获取当前时间并格式化
function getNowTime () {
  const time = new Date()
  let y = time.getFullYear()
  let m = time.getMonth() + 1
  let d = time.getDate()
  let h = time.getHours()
  let mi = time.getMinutes()
  let s = time.getSeconds()
  m = m < 10 ? `0${m}` : m
  d = d < 10 ? `0${d}` : d
  h = h < 10 ? `0${h}` : h
  mi = mi < 10 ? `0${mi}` : mi
  s = s < 10 ? `0${s}` : s
  return `${y}-${m}-${d} ${h}-${mi}-${s}`
}

2）调用函数

import { exportExcel } from '@/vendor/Export2Excel'

 downLoad() {
      // 从后端拿文件流 
      excelDown(params).then(res => {
        if (res.status == 200) {
          // 调用函数
          exportExcel(res.data,downTime);
        } else {
          this.$message.error("下载失败");
        }
      });
    }

2. 数据下载

一. .csv 格式下载

<div @click="downdetails"></div>

 // 点击下载
downdetails() {
   var time = this.parmsData.time.slice(0, 14).replace(/\s/g, "").replace(/-/g, "").replace(/:/g, "") + '00'
    // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = `姓名,年龄,性别,年级`
    // 增加\t为了不让表格显示科学计数法或者其他格式
    // tableList 表格数据，json格式
    for (let i = 0; i < this.tableList.length; i++) {
        for (const j in this.tableList[i]) {
            str += `${this.tableList[i][j] + '\t'},`
        }
        str += '\n'
    }
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
    // 通过创建a标签实现
    const link = document.createElement('a')
    link.href = uri
    // 对下载的文件命名
    link.download = '数据表' + time + '.csv'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
 }

二. .xslx格式表格导出（vue）

1.下载file-saver 和 xlsx

cnpm i file-saver xlsx -s

2.在要用的组件用中引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.为table添加id

// 为表格绑定一个id， 特别注意
<el-table
      id="table"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
    </el-table>

4.添加导出方法

 output () {
    let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
    /* #table 就是表格的id */
    let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出数据.xlsx');
    } catch (e) {
        if (typeof console !== 'undefined')
        console.log(e, wbout)
    }
    return wbout
}

下PDF格式文档参考文章https://www.jianshu.com/p/c9bd1744345f

打印功能（带分页）参考文章https://www.jianshu.com/p/cf606ebcf095

下载word文档（带图片），参考文章https://www.jianshu.com/p/3f2ec1e1fa92