javaScript 生成Excel 并下载（适合前后端分析的项目，可以减少后端方法）
程序员文章站
2022-03-15 10:25:39
...
1：java web项目中常用的导出Excel 的方式是通过POI工具再后端生成一个Excel文件，输出一个流；再浏览器中下载；
2：上面这种方式会增加一个重复的后台方法；本来就有一个查询列表的方法了，还在再写一个导出列表的方法，这两个方法
的逻辑是一样的，会造成浪费；如果是POST请求的话，传的参数是一个对象更麻烦；
3：前后端可能不太适合上面的项目；
理解：就是通过js封装了一个html页面，导出html 成为Excel；通过设置表格的样式来控制Excel的样式；
（注意点：订单号是科学计数法，我在后面不上去了一个空格；表头的样式 必须设置再td标签上，如果设置到tr上 整行全变了，超了；字体，边框都可以再 table标签上设置）
// 下载数据列表
downDeliveryList: function () {
const that = this
// 最多查询两千条
let queryData = JSON.parse(JSON.stringify(that.listReqData))
queryData.pageIndex = 1
queryData.pageSize = 2000
if (that.totalCount > 2000) {
that.$message.warning('当前数据已经超过2000条，只导出前2000千条')
}
$.jPost(`${api.myDelivery.getDeliverList}/${that.GLOBAL.employeeInfo.storeCode}/${that.GLOBAL.employeeInfo.employeeType}/${that.GLOBAL.employeeInfo.employeeAccountId}`,
JSON.stringify(queryData), that.GLOBAL.employeeInfo.token, (response) => {
if (!response.success) {
that.$message.warning(response.msg)
that.downLoading = false
} else {
const jsonData = []
for (let i = 0; i < response.data.data.length; i++) {
let info = {
'billStage': that.formatBillStage(response.data.data[i].billStage),
'billStageStatusStr': response.data.data[i].billStageStatusStr,
'billCode': response.data.data[i].billCode,
'userName': response.data.data[i].userName,
'vin': that.formatNull(response.data.data[i].vin),
'skuName': that.formatNull(response.data.data[i].skuName),
'pdiStatusStr': that.formatNull(response.data.data[i].pdiStatusStr),
'orderCode': response.data.data[i].orderCode + ' '
}
jsonData.push(info)
}
let cssStr = `font-size: 20px;background-color: #579ff8;`
// 列标题
let str = `<tr><td style="${cssStr}">序号</td><td style="${cssStr}">交付阶段</td><td style="${cssStr}">交付阶段状态</td><td style="${cssStr}">交付单号</td>` +
`<td style="${cssStr}">客户姓名</td><td style="${cssStr}">VIN码</td><td style="${cssStr}">车辆配置</td><td style="${cssStr}">车辆状态</td>` +
`<td style="${cssStr}">销售订单号</td></tr>`
// 循环遍历，每行加入tr标签，每个单元格加td标签
for (let i = 0; i < jsonData.length; i++) {
str += `<tr><td>${i + 1}</td>`
for (let item in jsonData[i]) {
// 增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${jsonData[i][item]}</td>`
}
str += '</tr>'
}
// Worksheet名
let worksheet = '共' + jsonData.length + '条交付单'
let uri = 'data:application/vnd.ms-excel;base64,'
// 下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table style="font-family: 微软雅黑;text-align:center;" border="1" cellspacing="1" cellpadding="0" >${str}</table></body></html>`
// 通过创建a标签实现
let link = document.createElement('a')
link.href = uri + this.base64(template)
// 对下载的文件命名
link.download = '交付单.xls'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
that.downLoading = false
}
})
},
base64: function (s) { return window.btoa(unescape(encodeURIComponent(s))) },下一篇： Android 广点通，网盟一键集成！