第一步:
在index.html中引入xlsx.js
<script src="./static/xlsx.js"></script>
第二步:
在组件里定义三个全局变量
var stringArray = []
const borderExcel = {
top: {
style: 'thin'
},
bottom: {
style: 'thin'
},
left: {
style: 'thin'
},
right: {
style: 'thin'
}
}
image.png
第三步:
// 这是导出的方法
exportExcel (json) {
// json数据是导出的表格数据
var copyJson = [{}]
for (var i = 0; i < json.length; i++) {
copyJson[i] = {
code: json[i].code == null ? '-' : json[i].code,
name: json[i].name == null ? '-' : json[i].name,
cost: json[i].cost == null ? '-' : json[i].cost,
percent: json[i].percent == null ? '-' : json[i].percent,
remark: json[i].remark == null ? '-' : json[i].remark
}
}
var tmpdata = copyJson[0]
var keyMap = []
for (var k in tmpdata) {
keyMap.push(k)
// copyJson[0][k] = k
}
copyJson.unshift({})
copyJson.unshift({})
copyJson.unshift({})
copyJson.unshift({})
var finishdata = []
copyJson.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
v: v[k],
// eslint-disable-next-line
position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
// eslint-disable-next-line
}))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => finishdata[v.position] = {
v: v.v,
s: {
//设置单元格样式
alignment: {
horizontal: 'center',
vertical: 'center'
},
font: {
name: '宋体',
sz: 10,
bold: false,
// color: { rgb: "333333" }
},
fill: {
fgColor: {
rgb: 'ffffff'
}
},
border: borderExcel
}
})
// console.log(finishdata)
var outputPos = Object.keys(finishdata)
var headerData = ['序号', '费用名称', '投标报价金额(美元)', '占比(%)', '备注']
finishdata['A1'] = {
// 设置第一行样式
v: '项目费用组成统计表',
s: {
alignment: {
horizontal: 'center',
vertical: 'center'
},
font: {
sz: 18,
bold: true
},
fill: {
fgColor: {
rgb: 'ffffff'
}
},
border: borderExcel
}
}
finishdata['A3'] = {
v: '投标编辑采用汇率(1美元=**币种):',
s: {
alignment: {
horizontal: 'left',
vertical: 'center'
},
font: {
sz: 10,
bold: true
},
fill: {
fgColor: {
rgb: 'ffffff'
}
},
border: borderExcel
}
}
var row2 = ['项目名称（中文）:', '', '投标截止日期: 年 月 日', '填报时间: 年 月 日']
for (let n = 0; n < row2.length; n++) {
finishdata[this.numToString(n + 1) + '2'] = {
v: row2[n],
s: {
alignment: {
horizontal: 'left',
vertical: 'center'
},
font: {
sz: 10,
bold: true
},
fill: {
fgColor: {
rgb: 'ffffff'
}
},
border: borderExcel
}
}
}
for (var n = 0; n < headerData.length; n++) {
finishdata[this.numToString(n + 1) + '4'] = {
v: headerData[n],
s: {
alignment: {
horizontal: 'center',
vertical: 'center'
},
font: {
sz: 10,
bold: true
},
fill: {
fgColor: {
rgb: 'ffffff'
}
},
border: borderExcel
}
}
}
// 设置合并行,合并列
var ttt = [
{
s: { c: 0, r: 0 },
e: { c: 4, r: 0 }
},
{
s: { c: 0, r: 1 },
e: { c: 1, r: 1 }
},
{
s: { c: 3, r: 1 },
e: { c: 4, r: 1 }
},
{
s: { c: 0, r: 2 },
e: { c: 4, r: 2 }
}
]
finishdata['!merges'] = ttt
// 设置列宽
let tmpColData = [
{ wpx: 70 },
{ wpx: 220 },
{ wpx: 220 },
{ wpx: 200 },
{ wpx: 50 }
]
// 设置行高
let rows = copyJson.map((item, index) => {
if (index === 0 || index === 3) {
return { hpx: 30 }
} else {
return { hpx: 20 }
}
})
var tmpWB = {
SheetNames: ['mySheet'],
Sheets: {
'mySheet': Object.assign({},
finishdata,
{
'!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1],
'!cols': tmpColData,
'!rows': rows
})
}
}
// eslint-disable-next-line
var tmpDown = new Blob([this.setBuffer(XLSX.write(tmpWB, { bookType: 'xlsx', bookSST: false, type: 'binary' }))], { type: 'application/octet-stream' })
this.saveAs(tmpDown, '项目费用组成统计表' + '.' + (wopts.bookType === 'biff2' ? 'xls' : wopts.bookType))
}
----------------------------------------------------------------------------------------------------------------
// 导出方法用到的方法
numToString (numm) {
stringArray.length = 0
var numToStringAction = function (nnum) {
var num = nnum - 1
var a = parseInt(num / 26)
var b = num % 26
stringArray.push(String.fromCharCode(64 + parseInt(b + 1)))
if (a > 0) {
numToStringAction(a)
}
}
numToStringAction(numm)
return stringArray.reverse().join('')
},
saveAs (obj, fileName) {
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(obj, fileName)
} else {
var tmpa = document.createElement('a')
tmpa.download = fileName || '下载'
tmpa.href = URL.createObjectURL(obj)
tmpa.click()
setTimeout(function () {
URL.revokeObjectURL(obj)
}, 100)
}
},
setBuffer (s) {
if (typeof ArrayBuffer !== 'undefined') {
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
} else {
var bufs = new Array(s.length)
for (var j = 0; j !== s.length; ++j) bufs[j] = s.charCodeAt(j) & 0xFF
return bufs
}
},
