export2excel.js实现将页面表格导出到excel中

本文介绍了如何利用export2excel.js库将Vue页面中的表格数据导出到Excel文件。通过分析和实践,详细展示了导入JS文件及调用函数的步骤,旨在帮助读者理解并实现此功能。
摘要由CSDN通过智能技术生成

最近遇到需要将页面中的table数据导出的情况,发现export2excel能够实现合格功能,因此分析了其中代码,加深自己的理解。
下面是我分析之后完成的代码,添加了一些注释方便大家理解。

/* eslink-disable */
// 需要引用xlsx和file-saveas两个依赖
import XLSX from 'xlsx'
import {
    saveAs } from 'file-saver'
// 将数据导出为excel
// var table = document.querySelectorAll('table')
// var row = table[0].querySelectorAll('tr')
// console.log(table[0])
// 将页面中的表格数据拿出来
function generateArray (table) {
   
	// 存放innerText
	var out = []
	// 获取页面行
	var rows = table.querySelectorAll('tr')
	// 每个元素占据的位置
	var range = []
	// 遍历各个行
	for (var i = 0; i < rows.length - 1; i++) {
   
		var outRow = []
		var row = rows[i]
		// 每一行中的列
		var cols = row.querySelectorAll('td')
		// 遍历每一列
		for (var j = 0; j < cols.length; j++) {
   
			// 每一个具体的列
			var col = cols[j]
			var colspan = col.getAttribute('colspan')
			var rowspan = col.getAttribute('rowspan')
			var colValue = col.innerText
			if (colValue !== '' && colValue === +colValue) {
   
				colValue = +colValue
			}
			if (colspan || rowspan) {
   
				rowspan = rowspan || 1
				colspan = colspan || 1
				// 确定该列的位置和占据的大小
				range.push({
   
					// 开始位置
					s: {
   
						r: i,
						c: outRow.length
					},
					// 结束位置
					e: {
   
						r: i + rowspan - 1,
						c: outRow.length + colspan - 1
					}
				})
			}
			// 将值传入outRow中
			outRow.push(colValue !== '' ? colValue : null)
			// 如果colspan大于1,在后面填满null,确定位置
			if (colspan > 1) {
   
				for (var k = 0; k < colspan - 1; k++) {
   
					outRow.push(null)
				}
			}
		}
		// 向out传递这一行的innerText,包含null
		out.push
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Export2Excel.js是一个用于将数据导出Excel文件的JavaScript库。如果你想修改表格样式,可以在Export2Excel.js文件进行以下操作: 1. 单元格宽度设置:可以通过设置列的宽度来调整单元格的宽度。例如,可以使用以下代码设置第一列的宽度为100px: ``` ws.col(1).setWidth(100) ``` 2. 边框设置:可以使用以下代码设置单元格的边框样式: ``` const borderStyle = { top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } } } ws.cell(row, col).style.border = borderStyle ``` 3. 字体设置:可以使用以下代码设置单元格的字体样式: ``` const font = { name: 'Arial', size: 10, bold: true, color: { rgb: 'FF0000' } } ws.cell(row, col).style.font = font ``` 4. 颜色设置:可以使用以下代码设置单元格的背景色和字体颜色: ``` ws.cell(row, col).style.fill = { type: 'pattern', patternType: 'solid', fgColor: { rgb: 'FFFF00' }, bgColor: { rgb: '000000' } } ws.cell(row, col).style.font = { color: { rgb: 'FF0000' } } ``` 5. 复杂表头处理:可以使用以下代码设置复杂表头: ``` const header = [ [ { title: '姓名', rowspan: 2, align: 'center', valign: 'middle' }, { title: '语文', colspan: 2, align: 'center', valign: 'middle' }, { title: '数学', colspan: 2, align: 'center', valign: 'middle' } ], [ { title: '成绩', align: 'center', valign: 'middle' }, { title: '排名', align: 'center', valign: 'middle' }, { title: '成绩', align: 'center', valign: 'middle' }, { title: '排名', align: 'center', valign: 'middle' } ] ] header.forEach((row, rowIndex) => { const newRow = ws.addRow([]) row.forEach((cell, cellIndex) => { const newCell = newRow.addCell(cell.title) newCell.style.alignment = { horizontal: 'center', vertical: 'middle' } if (cell.rowspan) { ws.mergeCells(rowIndex + 1, cellIndex + 1, rowIndex + cell.rowspan, cellIndex + 1) } if (cell.colspan) { ws.mergeCells(rowIndex + 1, cellIndex + 1, rowIndex + 1, cellIndex + cell.colspan) } }) }) ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值