<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
.post-message-section {
visibility: hidden;
}
</style>
</head>
<body>
<h1>上传Excel文件</h1>
<input type="file" id="fileInput">
<button id="getBtn">获取文件信息</button>
<div id="fileInfo"></div>
<!-- 需要把 uni.webview.1.5.6.js 下载到自己的服务器 -->
<!-- <script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script> -->
<script type="text/javascript" src="webview.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script type="text/javascript">
console.log('XLSX', XLSX)
// var worksheet = XLSX.utils.aoa_to_sheet([
// ["A1", "B1", "C1"],
// ["A2", "B2", "C2"],
// ["A3", "B3", "C3"]
// ]);
// console.log('worksheet', JSON.stringify(worksheet))
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
document.getElementById('getBtn').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const fileInfoDiv = document.getElementById('fileInfo');
if (fileInput.files.length === 0) {
fileInfoDiv.innerHTML = '没有选择文件。';
return;
}
const file = fileInput.files[0];
/* f is a File */
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
console.log('读取数据', data)
/* reader.readAsArrayBuffer(file) -> data will be an ArrayBuffer */
var workbook = XLSX.read(data);
/**
* workbook解析对象
* {
"SheetNames": [
"Sheet1"
],
"Sheets": {
"Sheet1": {
"A1": {
"t": "s",
"v": "姓名"
},
"B1": {
"t": "s",
"v": "电话"
},
"C1": {
"t": "s",
"v": "邮箱"
},
"A2": {
"t": "s",
"v": "测试数据"
},
"B2": {
"t": "n",
"v": 123456
},
"C2": {
"t": "s",
"v": "123@456.com"
},
"!ref": "A1:C2"
}
}
}
*/
console.log('读取数据workbook', JSON.stringify(workbook))
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
const jsonData = XLSX.utils.sheet_to_json(sheet);
console.log('读取数据jsonData', JSON.stringify(jsonData))
// jsonData 数据格式 如dataArr
const dataArr = [
{
"中段": 1,
"分段": "1-1",
"巷道": "1-2",
"孔号": "1-3",
"设计孔深": 1
},
{
"中段": 1,
"分段": "2",
"巷道": 1,
"孔号": 1,
"设计孔深": 2
},
{
"中段": 1,
"分段": 2,
"巷道": 2,
"孔号": 1,
"设计孔深": 3
},
{
"中段": 1,
"分段": 2,
"巷道": 2,
"孔号": 2,
"设计孔深": 4
},
{
"中段": 2,
"分段": "2-1",
"巷道": "2-2",
"孔号": "2-3",
"设计孔深": 5
}
]
// 获取第一个数据列表
getCascadeList(dataArr, '中段', null, '中段')
// 获取第二个数据列表
getCascadeList(dataArr, '中段', '1', '分段')
// 根据父列表选中值，获取下级的数据
//originArr所有列表数据 parentKey上级对应字段 parentVal上级对应字段值
function getCascadeList(originArr, parentKey, parentVal, sonKey){
const sonArr = new Set()
originArr.forEach((item, index)=>{
if(parentVal){ // 根据父级查找子级
if(item[parentKey] === parentVal){
sonArr.add(item[sonKey])
}
}else{ // 顶级列表
sonArr.add(item[parentKey])
}
})
console.log(sonArr)
return sonArr
}
uni.postMessage({
data: dataArr
});
// 数据处理
let workbookTemp = workbook.Sheets
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsArrayBuffer(file);
const fileSize = (file.size / 1024).toFixed(2); // 文件大小，单位KB
const fileName = file.name;
const fileType = file.type;
fileInfoDiv.innerHTML = `
<p>文件名: ${fileName}</p>
<p>文件类型: ${fileType}</p>
<p>文件大小: ${fileSize} KB</p>
`;
});
});
</script>
</body>
</html>
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>本地网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
</style>
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
window.getFileInfo = function() {
alert('ssse')
const fileInput = document.getElementById('fileInput');
const fileInfoDiv = document.getElementById('fileInfo');
if (fileInput.files.length === 0) {
fileInfoDiv.innerHTML = '没有选择文件。';
return;
}
const file = fileInput.files[0];
const fileSize = (file.size / 1024).toFixed(2); // 文件大小，单位KB
const fileName = file.name;
const fileType = file.type;
fileInfoDiv.innerHTML = `
<p>文件名: ${fileName}</p>
<p>文件类型: ${fileType}</p>
<p>文件大小: ${fileSize} KB</p>
`;
}
document.getElementById('getBtn').addEventListener('click', function() {
alert('555')
});
})
// document.querySelector("#postMessage").addEventListener('click', function() {
// uni.postMessage({
// data: {
// action: 'message'
// }
// });
// })
</script>
</head>
<body>
<h1>上传Excel文件</h1>
<input type="file" id="fileInput">
<button onclick="window.getFileInfo" id="getBtn">获取文件信息</button>
<div id="fileInfo"></div>
<p class="desc">web-view 组件加载本地 html 示例，仅在 App 环境下生效。点击下列按钮，跳转至其它页面。</p>
<div class="btn-list">
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
<button class="btn" type="button" data-action="switchTab">switchTab</button>
</div>
<p class="desc">网页向应用发送消息。注意：小程序端应用会在此页面后退时接收到消息。</p>
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
</body>
</html -->