vue2.0 导出Excel表格数据

1、安装三个依赖包

　　npm install -S file-saver

 　　npm install -S xlsx

　　npm install -D script-loader

2、在项目中创建一个文件夹（比如vendor，一般是在src目录下创建）

     把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内

    Blob.js在GitHub上能找到

   Export2Excel.js：

/* eslint-disable */
require('script-loader!file-saver');
require('script-loader!@/vendor/Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
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);
    console.log('a')
var oo = generateArray(theTable);
var ranges = oo[1];

/* original data */
var data = oo[0];
var ws_name = "SheetJS";
    console.log(data);

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")
}

function formatJson(jsonData) {
    console.log(jsonData)
}
export function export_json_to_excel(th, jsonData, defaultTitle) {

/* original data */

var data = jsonData;
    data.unshift(th);
var ws_name = "SheetJS";

var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);


/* 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'});
var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

   require('script-loader!file-saver'); //保存文件用

 require('script-loader!vendor/Blob'); //转二进制用

 require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

 由于这几个文件不支持import引入，所以我们需要`script-loader`来将他们挂载到全局环境下

3、在页面中使用

Export2Excel.js暴露了两个接口export_table_to_excel和export_json_to_excel,我们常用export_json_to_excel因为更加的可控一点

 <template>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
    <el-table:data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期"width="180">
      </el-table-column>
      <el-table-column prop="name"  label="姓名"  width="180">
      </el-table-column>
      <el-table-column  prop="address" label="地址">
      </el-table-column>
    </el-table>
  </template>

 handleDownload() {
this.downloadLoading = true
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['日期', '姓名', '地址']
          const filterVal = ['date', 'name', 'address']
          const list = this.tableData
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '列表excel')
this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
      }

4、注意问题：

const { export_json_to_excel } = require('@/vendor/Export2Excel')这里的@/vendor/Export2Excel路径问题
关键是看build目录下的webpack.base.conf.js配置文件的alias

所以: