125 lines
5.7 KiB
HTML
125 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>XLS文件上传和导出</title>
|
||
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #f8f9fa;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 50px auto;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid #dee2e6;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
width: 100%;
|
||
|
|
background-color: #007bff;
|
||
|
|
border-color: #007bff;
|
||
|
|
}
|
||
|
|
.btn-primary:hover {
|
||
|
|
background-color: #0056b3;
|
||
|
|
border-color: #0056b3;
|
||
|
|
}
|
||
|
|
.form-control-file {
|
||
|
|
border: 1px solid #ced4da;
|
||
|
|
border-radius: 0.25rem;
|
||
|
|
padding: 0.375rem 0.75rem;
|
||
|
|
}
|
||
|
|
.form-control-file:hover {
|
||
|
|
border-color: #007bff;
|
||
|
|
}
|
||
|
|
.text-center {
|
||
|
|
color: #343a40;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="text-center">XLS文件上传和导出</h2>
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<p class="text-muted">请使用此功能上传 XLS 文件，并根据您的需求提取指定字段的数据进行导出。您可以选择要导出的起始行，确保您的文件格式符合要求。</p>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="fileInput">选择 Excel 文件</label>
|
||
|
|
<input type="file" class="form-control-file" id="fileInput" accept=".xls,.xlsx">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="startRowInput">从第几行开始导出（从 1 开始）</label>
|
||
|
|
<input type="number" class="form-control" id="startRowInput" value="1" min="1">
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn btn-primary" id="exportButton">导出</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
|
||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||
|
|
<script>
|
||
|
|
document.getElementById('exportButton').onclick = function() {
|
||
|
|
const fileInput = document.getElementById('fileInput');
|
||
|
|
const file = fileInput.files[0];
|
||
|
|
const startRowInput = document.getElementById('startRowInput');
|
||
|
|
const startRow = parseInt(startRowInput.value) - 1; // 转换为从 0 开始的索引
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function(e) {
|
||
|
|
const data = new Uint8Array(e.target.result);
|
||
|
|
const workbook = XLSX.read(data, { type: 'array' });
|
||
|
|
const firstSheetName = workbook.SheetNames[0];
|
||
|
|
const worksheet = workbook.Sheets[firstSheetName];
|
||
|
|
// 获取原始工作表的 JSON 数据
|
||
|
|
const originalData = XLSX.utils.sheet_to_json(worksheet, { raw: false });
|
||
|
|
// 假设我们要提取的 5 个字段是 '字段1', '字段2', '字段3', '字段4', '字段5'
|
||
|
|
const fieldsToExtract = ['姓名', '部门', '账号', '入职日期'];
|
||
|
|
const extractedData = [];
|
||
|
|
// 从指定行开始提取数据
|
||
|
|
for (let i = startRow; i < originalData.length; i++) {
|
||
|
|
let newRow = {};
|
||
|
|
fieldsToExtract.forEach(field => {
|
||
|
|
if (originalData[i][field]!== undefined) {
|
||
|
|
newRow[field] = originalData[i][field];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
extractedData.push(newRow);
|
||
|
|
}
|
||
|
|
// 将提取的数据转换为工作表
|
||
|
|
const newWorksheet = XLSX.utils.json_to_sheet(extractedData);
|
||
|
|
// 计算每列的最大宽度
|
||
|
|
const columnWidths = [];
|
||
|
|
extractedData.forEach(row => {
|
||
|
|
Object.keys(row).forEach((key, index) => {
|
||
|
|
const value = row[key]? row[key].toString() : '';
|
||
|
|
if (!columnWidths[index] || columnWidths[index] < value.length) {
|
||
|
|
columnWidths[index] = value.length;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
// 设置列宽
|
||
|
|
columnWidths.forEach((width, index) => {
|
||
|
|
newWorksheet['!cols'] = newWorksheet['!cols'] || [];
|
||
|
|
newWorksheet['!cols'][index] = { wch: width + 2 }; // 增加额外的宽度
|
||
|
|
});
|
||
|
|
const newWorkbook = XLSX.utils.book_new();
|
||
|
|
XLSX.utils.book_append_sheet(newWorkbook, newWorksheet, '新工作表');
|
||
|
|
const newFileName = '输出.xls';
|
||
|
|
XLSX.writeFile(newWorkbook, newFileName);
|
||
|
|
};
|
||
|
|
reader.readAsArrayBuffer(file);
|
||
|
|
} else {
|
||
|
|
alert('请先选择一个文件');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|