exportExcel: function () {
var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});//mytable为表格的id名
console.log(wb)
for (var i = 0; i < 12; i++) {
wb["!cols"][i] = {wpx: 100}
}
for (const key in wb) {
if (key.indexOf('!') === -1) {
wb[key].s = {
font: {// 字体设置
sz: 13,
bold: false,
color: {
rgb: '000000'// 十六进制，不带#
}
},
border: { // 设置边框
top: {style: 'thin'},
bottom: {style: 'thin'},
left: {style: 'thin'},
right: {style: 'thin'}
},
alignment: {// 文字居中 //字体水平居中、垂直居中、自动换行
horizontal: 'center',
vertical: 'center',
wrap_text: true
}
}
// console.log(wb[key].s)
}
}
console.log(wb)
let date = this.sheet2blob(wb)
let data = new Date();
let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
try {
window.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象
// Blob 表示的不一定是js的原生格式数据
// File 接口基于Blob,
// 返回一个新创建的Blob对象,其内容由参数中给定的数组串联
new Blob([date], {type: "application/octet-stream"}),
// 导出文件名称
startTime + '.xlsx'
);
} catch (e) {
// 捕捉报错
if (typeof console != "undefined") {
console.log(e, 123);
}
}
// console.log(startTime)
// // 将结果返回出来，导出文件
// return date;
// 首先加载 'excelTable'> 标签 为 workbook对象
// let workbook = XLSX.utils.table_to_book(document.getElementById('mytable'));
//// 先定义列宽 ， 我这里文件一共有7 列 ，所以设置7列宽度相等都为 20 ，如果你有很多列建议直接 map()
// let wscols = [
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 },
// { wch: 20 }
// ];
//// 获取 需要设置样式的 sheet ，我这里只有 一个 sheet 所以索引默认加载了第一个
// const sheet = workbook.Sheets[workbook.SheetNames[0]];
//// 设置列宽
// sheet['!cols'] = wscols;
////// 定义框线样式
// const borderAll = {
// color: { auto: 1 },
// top: {style: "thin"},
// bottom: { style: "thin"},
// left: { style: "thin" },
// right: { style: "thin" }
// };
////// 这里的意思为 先默认代表表格的 7 个列 的 列号
//// 比如 A2 意思是 第一列 第2行
// const _letterList = ['A', 'B', 'C', 'D', 'E', 'F', 'G','H','I','J','K','L']
//// 定义一个 箭头函数，接受三个参数，分别为 当前Sheet , 行列号（例如：‘A2’）, 是否是新增样式
// const _mapCellStyle = (_sheet, _key, _type) => {
// const _cellStyle = {
// border: borderAll,
// alignment: {
// wrapText: true,
// horizontal: "center",
// vertical: "center"// },
// font: {
// name: "微软雅黑",
// sz: 10// },
// bold: true,
// numFmt: "0"// }
////if (_type === 'append') {
//// 需要新增样式，说明当前加载的sheet中并不存在该单元格，可能当前单元格被前边合并，这种被合并的单元格也得设置样式，
//// 否则就会出现 合并单元格只有第一格带框线，后边没框线的情况出现，所以这里需要将后边的边框样式也加上。
// _sheet[_key] = {
// s: _cellStyle
// }
// } else {
//// 若不是新增样式 则代表sheet中已存在该表格直接修改其 s 属性即可使属性生效
//if (typeof _sheet[_key] === 'object') {
// _sheet[_key].s = _cellStyle
// }
// }
// }
////// sheet 不懂得可以单独打印一下，它其实就是一个对象，键代表行列号（‘A2’），值为该单元格的值，样式等，
//// 我们需要做的就是修改其值中的样式
// Object.keys(sheet).forEach((i, _) => {
//// 无用属性直接过滤
//if (i !== "!ref" || i !== "!cols" || i !== "!merges" || i !== "Am") {
//// 首先设置遍历到的 当前 key
// let _nowKey = i
//// 然后调用 _mapCellStyle 渲染当前单元格样式
// _mapCellStyle(sheet, _nowKey)
//// 我们这里先获取下一个行列号 例如当前_nowKey 是 A1 这里就是获取到 B1 ,及 当前行的 下一列数据
// let _nextKey = _letterList[_letterList.indexOf(_nowKey[0]) + 1] + i.slice(1)
////// 判断 B1 是否在 Sheet的key中,如果不存在，只可能是因为B1所在单元格已经被A1所合并，所以我们需要将B1也调用一下 _mapCellStyle
//// 渲染 B1 的样式，不然就会出现 A1 B1 这两格是合并的状态，只有A1有框线，而B1 没有框线的情况。
//// 这里用 while 就是 要把需要合并的单元格全部 渲染上样式，直到可能 B4 在 Sheet中 停止
//while (_nowKey[0] !== 'G' && !Object.keys(sheet).includes(_nextKey)) {
// _mapCellStyle(sheet, _nextKey, 'append')
//// 这里就是简单的交换索引
// _nowKey = _nextKey
// _nextKey = _letterList[_letterList.indexOf(_nowKey[0]) + 1] + _nowKey.slice(1)
// }
// }
// })
//// let wopts = {
// bookType: 'xlsx',
// bookSST: false,
// type: 'buffer',
// }
// console.log(workbook)
// console.log(wopts)
// let _blob = XLSX.write(workbook, wopts);
//// window.saveAs(new Blob([_blob], {
// type: "application/octet-stream"// }), "项目信息一张表.xlsx");
},
sheet2blob(sheet, sheetName) {
// console.log(sheet, sheetName, 'sheet, sheetName')
sheetName = sheetName || 'sheet1'
console.log(sheetName, 'sheetName')
var workbook = {
SheetNames: [sheetName],
Sheets: {}
}
workbook.Sheets[sheetName] = sheet // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
}
var wbout = XLSX.write(workbook, wopts)
var blob = new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
}) // 字符串转ArrayBuffer
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
}
return blob
},
问题全部代码前端一个id就可以了答案对了的话可以去我另外那个拿奖励
这段代码主要是将表格数据转化为excel文件并下载，其中用到了XLSX库进行处理。具体步骤如下：
获取表格数据
var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});
其中，#mytable为表格的id名，这里使用了XLSX库提供的table_to_sheet方法将表格数据转化为工作簿。
设置单元格样式
for (const key in wb) {
if (key.indexOf('!') === -1) {
wb[key].s = {...}
}
}
这里使用了for...in循环遍历工作簿中的单元格，然后通过设置单元格样式的方式实现对单元格的样式设置。其中，s属性用来设置单元格样式，可以设置字体、边框、对齐方式等。
导出excel文件
let date = this.sheet2blob(wb)
let data = new Date();
let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
try {
window.saveAs(
new Blob([date], {type: "application/octet-stream"}),
startTime + '.xlsx'
);
} catch (e) {
if (typeof console != "undefined") {
console.log(e, 123);
}
}
这里使用了Blob对象和window.saveAs方法实现excel文件的导出和下载。具体来说，先将工作簿转化为blob对象，然后通过window.saveAs方法将blob对象下载为excel文件。其中，Blob对象表示一个不可变、原始数据的类文件对象，type属性表示文件类型，window.saveAs方法用来将blob对象下载为文件。
最后，这里提供一个参考的示例代码：
function exportExcel() {
var wb = XLSX.utils.table_to_sheet(document.querySelector("#mytable"), {raw: true});
for (const key in wb) {
if (key.indexOf('!') === -1) {
wb[key].s = {
font: {
sz: 13,
bold: false,
color: {
rgb: '000000'
}
},
border: {
top: {style: 'thin'},
bottom: {style: 'thin'},
left: {style: 'thin'},
right: {style: 'thin'}
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrap_text: true
}
}
}
}
let date = sheet2blob(wb)
let data = new Date();
let startTime = data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日' + data.getHours() + '时' + data.getMinutes() + '分' + data.getSeconds();
try {
window.saveAs(
new Blob([date], {type: "application/octet-stream"}),
startTime + '.xlsx'
);
} catch (e) {
if (typeof console != "undefined") {
console.log(e, 123);
}
}
}
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1'
var workbook = {
SheetNames: [sheetName],
Sheets: {}
}
workbook.Sheets[sheetName] = sheet
var wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
}
var wbout = XLSX.write(workbook, wopts)
var blob = new Blob([s2ab(wbout)], {
type: 'application/octet-stream'
})
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
}
return blob
}
addHandle (id) {
// console.log('+' + id)
let products = [...this.products]
products.some(item => {
if (item.goods_id === id) {
// 找到了要修改数量的商品，把对应商品数量加一
item.num = item.num + 1
// 终止遍历
return true
}
})
this.products = products
// this.updateStorage()
}