Export2Excel.js

Export2Excel.js

/* eslint-disable */

import { saveAs } from 'file-saver'

import XLSX from 'xlsx'

function generateArray(table) {

  var out = [];

  var rows = table.querySelectorAll('tr');

  var ranges = [];

  for (var R = 0; R < rows.length; ++R) {

    var outRow = [];

    var row = rows[R];

    var columns = row.querySelectorAll('td');

    for (var C = 0; C < columns.length; ++C) {

      var cell = columns[C];

      var colspan = cell.getAttribute('colspan');

      var rowspan = cell.getAttribute('rowspan');

      var cellValue = cell.innerText;

      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges

      ranges.forEach(function (range) {

        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {

          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);

        }

      });

      //Handle Row Span

      if (rowspan || colspan) {

        rowspan = rowspan || 1;

        colspan = colspan || 1;

        ranges.push({

          s: {

            r: R,

            c: outRow.length

          },

          e: {

            r: R + rowspan - 1,

            c: outRow.length + colspan - 1

          }

        });

      };

      //Handle Value

      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan

      if (colspan)

        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);

    }

    out.push(outRow);

  }

  return [out, ranges];

};

function datenum(v, date1904) {

  if (date1904) v += 1462;

  var epoch = Date.parse(v);

  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);

}

function sheet_from_array_of_arrays(data, opts) {

  var ws = {};

  var range = {

    s: {

      c: 10000000,

      r: 10000000

    },

    e: {

      c: 0,

      r: 0

    }

  };

  for (var R = 0; R != data.length; ++R) {

    for (var C = 0; C != data[R].length; ++C) {

      if (range.s.r > R) range.s.r = R;

      if (range.s.c > C) range.s.c = C;

      if (range.e.r < R) range.e.r = R;

      if (range.e.c < C) range.e.c = C;

      var cell = {

        v: data[R][C]

      };

      if (cell.v == null) continue;

      var cell_ref = XLSX.utils.encode_cell({

        c: C,

        r: R

      });

      if (typeof cell.v === 'number') cell.t = 'n';

      else if (typeof cell.v === 'boolean') cell.t = 'b';

      else if (cell.v instanceof Date) {

        cell.t = 'n';

        cell.z = XLSX.SSF._table[14];

        cell.v = datenum(cell.v);

      } else cell.t = 's';

      ws[cell_ref] = cell;

    }

  }

  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);

  return ws;

}

function Workbook() {

  if (!(this instanceof Workbook)) return new Workbook();

  this.SheetNames = [];

  this.Sheets = {};

}

function s2ab(s) {

  var buf = new ArrayBuffer(s.length);

  var view = new Uint8Array(buf);

  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;

  return buf;

}

export function export_table_to_excel(id) {

  var theTable = document.getElementById(id);

  var oo = generateArray(theTable);

  var ranges = oo[1];

  /* original data */

  var data = oo[0];

  var ws_name = "SheetJS";

  var wb = new Workbook(),

    ws = sheet_from_array_of_arrays(data);

  /* add ranges to worksheet */

  // ws['!cols'] = ['apple', 'banan'];

  ws['!merges'] = ranges;

  /* add worksheet to workbook */

  wb.SheetNames.push(ws_name);

  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {

    bookType: 'xlsx',

    bookSST: false,

    type: 'binary'

  });

  saveAs(new Blob([s2ab(wbout)], {

    type: "application/octet-stream"

  }), "test.xlsx")

}

export function export_json_to_excel({

  multiHeader = [],

  header,

  data,

  filename,

  merges = [],

  autoWidth = true,

  bookType = 'xlsx'

} = {}) {

  /* original data */

  filename = filename || 'excel-list'

  data = [...data]

  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {

    data.unshift(multiHeader[i])

  }

  var ws_name = "SheetJS";

  var wb = new Workbook(),

    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {

    if (!ws['!merges']) ws['!merges'] = [];

    merges.forEach(item => {

      ws['!merges'].push(XLSX.utils.decode_range(item))

    })

  }

  if (autoWidth) {

    /*设置worksheet每列的最大宽度*/

    const colWidth = data.map(row => row.map(val => {

      /*先判断是否为null/undefined*/

      if (val == null) {

        return {

          'wch': 10

        };

      }

      /*再判断是否为中文*/

      else if (val.toString().charCodeAt(0) > 255) {

        return {

          'wch': val.toString().length * 2

        };

      } else {

        return {

          'wch': val.toString().length

        };

      }

    }))

    /*以第一行为初始值*/

    let result = colWidth[0];

    for (let i = 1; i < colWidth.length; i++) {

      for (let j = 0; j < colWidth[i].length; j++) {

        if (result[j]['wch'] < colWidth[i][j]['wch']) {

          result[j]['wch'] = colWidth[i][j]['wch'];

        }

      }

    }

    ws['!cols'] = result;

  }

  /* add worksheet to workbook */

  wb.SheetNames.push(ws_name);

  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {

    bookType: bookType,

    bookSST: false,

    type: 'binary'

  });

  saveAs(new Blob([s2ab(wbout)], {

    type: "application/octet-stream"

  }), `${filename}.${bookType}`);

}

使用

<template>

  <div class="dynamicTableTest">

    <h2>动态生成表格</h2>

    <div class="content-view">

      <div class="ctl-view">

        <el-select v-model="searchColItem" clearable placeholder="请选择要搜索的列" size="small" class="ctl-select">

          <el-option

            v-for="item in searchColOption"

            :key="item.prop"

            :label="item.label"

            :value="item.prop" />

        </el-select>

        <el-input v-model="searchText" placeholder="请输入内容" size="small" clearable class="ctl-input" />

        <el-button type="primary" size="small" @click="searchClick">搜索</el-button>

        <el-button size="small" @click="resetClick">重置</el-button>

        <el-button v-if="tableShowData.length>0" type="primary" size="small" @click="handleDownload(tableCols, tableShowData, filename)">导出</el-button>

      </div>

      <el-table :data="tableShowData" :border="true" height="420" style="width: 100%">

        <el-table-column

          v-for="col in tableCols"

          :key="col.prop"

          :prop="col.prop"

          :label="col.label"

          :filters="col.filters"

          filter-placement="bottom-end"

          :filter-method="filterTag"

          :sortable="col.sortable"

          :class-name="col.filters.length==0?'hide-filter':'show-filter'">

          <template slot-scope="scope">

            <el-popover

              placement="left"

              title=""

              width="auto"

              trigger="click"

              :content="scope.row[col.prop]">

              <div slot="reference" class="overtext">{{ scope.row[col.prop] }}</div>

            </el-popover>

          </template>

        </el-table-column>

      </el-table>

    </div>

  </div>

</template>

<script>

import indexjs from './index.js'

export default {

  ...indexjs

}

</script>

<style lang='scss' scoped>

@import './index.scss'

</style>

导出

 // 导出Excel

    handleDownload(tableCols, tableData, filename) {

      const tempname = this.formatDate('yyyy-MM-dd HH:mm:ss')

      const tHeader = []

      const filterVal = []

      tableCols.forEach(item => {

        tHeader.push(item.label)

        filterVal.push(item.prop)

      })

      import('@/utils/Export2Excel').then(excel => {

        const list = tableData

        const data = this.formatJson(filterVal, list)

        excel.export_json_to_excel({

          header: tHeader,

          data,

          filename: filename + tempname,

          autoWidth: true,

          bookType: 'xlsx'

        })

      })

    },

   // 方便对数据特殊处理

    formatJson(filterVal, jsonData) {

      return jsonData.map(v => filterVal.map(j => {

        return v[j]

      }))

    },

 // 返回格式化时间

    formatDate(fmt) {

      const nowDate = new Date()

      var o = {

        'M+': nowDate.getMonth() + 1, // 月份

        'd+': nowDate.getDate(), // 日

        'H+': nowDate.getHours(), // 小时

        'm+': nowDate.getMinutes(), // 分

        's+': nowDate.getSeconds(), // 秒

        'q+': Math.floor((nowDate.getMonth() + 3) / 3), // 季度

        'S': nowDate.getMilliseconds() // 毫秒

      }

      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (nowDate.getFullYear() + '').substr(4 - RegExp.$1.length))

      for (var k in o) {

        if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))

      }

      return fmt

    },