vue. 导出excel或cdv

js

export default {
data() {
return {
tableHeight: 32 * 20 + 34,
bossChannelTypeList: [],
bossBusinessTypeList: [],
platformProductsList: [],
usingPlatformProductsList: []
}
},
computed: {
},
created() {
},
methods: {
/**
* 导出数据为csv
* 
* 
@exportCsv({
title: ["客户编码", "第二列"],
titleForKey: ["accountSn", "accountType"],
data: this.tableData,
head:'名字'
}) 
* 
*/
exportCsv(obj) {
var title = obj.title;
var titleForKey = obj.titleForKey;
var data = obj.data;
for(let i in data){
data[i] = data[i]
for(let j in data[i]){
if(data[i][j]){
data[i][j] = data[i][j] + "\t"
}
if(data[i][j] == null){
data[i][j] = ''
}
}
}
var str = [];
str.push("\uFEFF" + obj.title.join(",") + "\n");
for (var i = 0; i < data.length; i++) {
var temp = [];
for (var j = 0; j < titleForKey.length; j++) {
temp.push(data[i][titleForKey[j]]+"");
}
str.push("\uFEFF" + temp.join(",") + "\n");
}
var blob = new Blob(str, {
type: 'text/plain'
});
var link = document.createElement('a');
link.download = obj.head+'.csv';
link.href = window.URL.createObjectURL(blob);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},

/**
* 导出数据为excel
* 
* 
* @param {any} [params={}] 
* @param {Array} [params.tableHead] // excel 表头 [{'key':'value'},{},{}]  –  key代表在对应的value表头下 ,要插入哪条信息的key值,value:代表表头要显示的信息
* @param {Array} [params.tableData] // excel 数据
* @param {String}[params.fileName] // 下载文件名称
* 
*/
exportResultToExcel(params) {
let paramsClone = JSON.parse(JSON.stringify(params))
let titleForKey = paramsClone.tableHead.map(i => Object.keys(i)[0])
let excelHeader = paramsClone.tableHead.map(i => i[Object.keys(i)[0]])
let excelTableData = paramsClone.tableData.map(v => paramsClone.tableHead.map((j, ind) => v[titleForKey[ind]]))
let excelData = []
excelData.push(excelHeader)
excelTableData = excelData.concat(excelTableData)
let now = this.DateFormat(+new Date(), 'yyyy-MM-dd hh:mm:ss')
this.downExcel(excelTableData, `${params.fileName}-${now}`)
},
downExcel(json, downName, type) {
let keyMap = []
for (let k in json[0]) {
keyMap.push(k)
}
let tmpdata = [] // 用来保存转换好的json
json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
}))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
tmpdata[v.position] = {
v: v.v
}
})
let outputPos = Object.keys(tmpdata) // 设置区域,比如表格从A1到D10
let tmpWB = {
SheetNames: ['mySheet'], // 保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, // 内容
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
})
}
}
let tmpDown = new Blob([this.s2ab(xlsx.write(tmpWB,
{ bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary' } // 这里的数据是用来定义导出的格式类型
))], {
type: ''
}) // 创建二进制对象写入转换好的字节流
var href = URL.createObjectURL(tmpDown) // 创建对象超链接
let link = document.createElement('a')
link.href = href // 绑定a标签
link.download = downName + '.xlsx'//配置下载的文件名
link.click() // 模拟点击实现下载
setTimeout(function () { // 延时释放
URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
}, 100)
},
s2ab: function (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
},
getCharCol: function (n) { // 将指定的自然数转换为26进制表示。映射关系:[0-25] -> [A-Z]。
let s = ''
let m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
},
// 日期格式化工具
DateFormat: (ms, fmt) => {
if (ms == null || ms == undefined || (Object.prototype.toString.call(ms) === '[object String]' && ms.length == 0)) return
let val = new Date(ms)
let o = {
"M+": val.getMonth() + 1, //月份 
"d+": val.getDate(), //日 
"h+": val.getHours(), //小时 
"m+": val.getMinutes(), //分 
"s+": val.getSeconds(), //秒 
"q+": Math.floor((val.getMonth() + 3) / 3), //季度 
"S": val.getMilliseconds() //毫秒 
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (val.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
}
}
}

methods{
      // 函数请求
     csv请求格式:
        this.exportCsv({
            title: ["对账单号","对账日期"],
            titleForKey: ["billNo","checkDate"],
            data: arr,
            head: '交易对账结果'+Date.parse(new Date())
       })

       xlsx请求格式:
       this.exportResultToExcel({
           tableHead: [
                {'billNo': '对账单号'},
                {'checkDate': '对账日期'},
                 ... ...
            ],
            tableData: arr,
            fileName: '交易对账结果'+Date.parse(new Date())
         })
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容