vue导出excel表格功能

第一步安装依赖包 

     cnpm install  file-saver

     cnpm install xlsx

     cnpm install script-loader

第二步在项目中assets下创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件

第三步在你那个组件中使用

tHeader:标题

filterVal：字段名

tableData:前端请求的数据

exportToExcel() {

//excel数据导出

  require.ensure([], () => {

const {

export_json_to_excel

    } = require('../../assets/js/Export2Excel');

const tHeader = ['序号','姓名','用户名','性别','邮箱'];

const filterVal = ['userId','name','username','sex','email'];

const list =this.users;

const data =this.formatJson(filterVal,list);

export_json_to_excel(tHeader,data,'用户列表');

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]))

},

export2Excel.js

/* eslint-disable */

require('script-loader!file-saver');

// require('script-loader!src/vendor/Blob');

require('script-loader!../../assets/js/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

var outRow = [];

var row =rows[R];

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

for (var C =0;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

}

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

if (range.e.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")

}

Blob.js

/* eslint-disable */

/* Blob.js*/

/*global self, unescape */

/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,

plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

(function (view) {

"use strict";

view.URL = view.URL || view.webkitURL;

if (view.Blob && view.URL) {

try {

new Blob;

return;

}catch (e) {

}

}

// Internally we use a BlobBuilder implementation to base Blob off of

// in order to support older browsers that only have BlobBuilder

  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {

var

      get_class =function (object) {

return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];

}

,FakeBlobBuilder =function BlobBuilder() {

this.data = [];

}

,FakeBlob =function Blob(data, type, encoding) {

this.data = data;

this.size = data.length;

this.type = type;

this.encoding = encoding;

}

,FBB_proto =FakeBlobBuilder.prototype

      ,FB_proto =FakeBlob.prototype

      ,FileReaderSync = view.FileReaderSync

,FileException =function (type) {

this.code =this[this.name = type];

}

,file_ex_codes = (

"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "

        +"NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"

      ).split(" ")

,file_ex_code =file_ex_codes.length

      ,real_URL = view.URL || view.webkitURL || view

,real_create_object_URL =real_URL.createObjectURL

      ,real_revoke_object_URL =real_URL.revokeObjectURL

      ,URL =real_URL

      ,btoa = view.btoa

      ,atob = view.atob

      ,ArrayBuffer = view.ArrayBuffer

      ,Uint8Array = view.Uint8Array

,origin =/^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/

    ;

FakeBlob.fake =FB_proto.fake =true;

while (file_ex_code--) {

FileException.prototype[file_ex_codes[file_ex_code]] =file_ex_code +1;

}

// Polyfill URL

    if (!real_URL.createObjectURL) {

URL = view.URL =function (uri) {

var

          uri_info =document.createElementNS("http://www.w3.org/1999/xhtml","a")

,uri_origin

        ;

uri_info.href = uri;

if (!("origin" in uri_info)) {

if (uri_info.protocol.toLowerCase() ==="data:") {

uri_info.origin =null;

}else {

uri_origin = uri.match(origin);

uri_info.origin =uri_origin &&uri_origin[1];

}

}

return uri_info;

};

}

URL.createObjectURL =function (blob) {

var

        type = blob.type

        ,data_URI_header

      ;

if (type ===null) {

type ="application/octet-stream";

}

if (blobinstanceof FakeBlob) {

data_URI_header ="data:" +type;

if (blob.encoding ==="base64") {

return data_URI_header +";base64," + blob.data;

}else if (blob.encoding ==="URI") {

return data_URI_header +"," +decodeURIComponent(blob.data);

}

if (btoa) {

return data_URI_header +";base64," +btoa(blob.data);

}else {

return data_URI_header +"," +encodeURIComponent(blob.data);

}

}else if (real_create_object_URL) {

return real_create_object_URL.call(real_URL, blob);

}

};

URL.revokeObjectURL =function (object_URL) {

if (object_URL.substring(0,5) !=="data:" &&real_revoke_object_URL) {

real_revoke_object_URL.call(real_URL, object_URL);

}

};

FBB_proto.append =function (data/*, endings*/) {

var bb =this.data;

// decode data to a binary string

      if (Uint8Array && (datainstanceof ArrayBuffer || datainstanceof Uint8Array)) {

var

          str =""

          ,buf =new Uint8Array(data)

,i =0

          ,buf_len =buf.length

        ;

for (;i

str +=String.fromCharCode(buf[i]);

}

bb.push(str);

}else if (get_class(data) ==="Blob" ||get_class(data) ==="File") {

if (FileReaderSync) {

var fr =new FileReaderSync;

bb.push(fr.readAsBinaryString(data));

}else {

// async FileReader won't work as BlobBuilder is sync

          throw new FileException("NOT_READABLE_ERR");

}

}else if (datainstanceof FakeBlob) {

if (data.encoding ==="base64" &&atob) {

bb.push(atob(data.data));

}else if (data.encoding ==="URI") {

bb.push(decodeURIComponent(data.data));

}else if (data.encoding ==="raw") {

bb.push(data.data);

}

}else {

if (typeof data !=="string") {

data +="";// convert unsupported types to strings

        }

// decode UTF-16 to binary string

        bb.push(unescape(encodeURIComponent(data)));

}

};

FBB_proto.getBlob =function (type) {

if (!arguments.length) {

type =null;

}

return new FakeBlob(this.data.join(""), type,"raw");

};

FBB_proto.toString =function () {

return "[object BlobBuilder]";

};

FB_proto.slice =function (start, end, type) {

var args =arguments.length;

if (args <3) {

type =null;

}

return new FakeBlob(

this.data.slice(start,args >1 ? end :this.data.length)

, type

,this.encoding

      );

};

FB_proto.toString =function () {

return "[object Blob]";

};

FB_proto.close =function () {

this.size =0;

delete this.data;

};

return FakeBlobBuilder;

}(view));

view.Blob =function (blobParts, options) {

var type = options ? (options.type ||"") :"";

var builder =new BlobBuilder();

if (blobParts) {

for (var i =0,len = blobParts.length;i

if (Uint8Array && blobParts[i]instanceof Uint8Array) {

builder.append(blobParts[i].buffer);

}

else {

builder.append(blobParts[i]);

}

}

}

var blob =builder.getBlob(type);

if (!blob.slice &&blob.webkitSlice) {

blob.slice =blob.webkitSlice;

}

return blob;

};

var getPrototypeOf =Object.getPrototypeOf ||function (object) {

return object.__proto__;

};

view.Blob.prototype =getPrototypeOf(new view.Blob());

}(

typeof self !=="undefined" &&self

  ||typeof window !=="undefined" &&window

  ||this

));

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,053评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,527评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,779评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,685评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,699评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,609评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,989评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,654评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,890评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,394评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,976评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2赞 342

推荐阅读更多精彩内容