local-copy.html

<!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 -->