【无标题】excel里的题库，转为试卷

天天天155

已于 2023-12-12 11:01:57 修改

阅读量281

点赞数

文章标签： javascript 前端

于 2023-12-12 10:59:53 首次发布

本文链接：https://blog.csdn.net/weixin_47625165/article/details/134944047

版权

本来接到一个这样的活，一个exel里边一千多行的试题，多选，单选，判断啥的，让我做成试卷，在我奋战半小时后，才复制40多行。心态崩了。

是一个这样的文档
请添加图片描述
后来我一想，可以用js实现啊，读一下csv，存到一个list中，在使用html显示出来，加点样式不就ok了。

说干就干

请添加图片描述
最后效果

<!DOCTYPE html>
<html>
<head>
    <title>zxxbscj</title>
</head>
<body>
    <input type="file" id="csvFile" accept=".csv" onchange="handleFile(this)">
	<span>第二列提干， 3456为abcd ，第六列答案</span>
	  <div id="objectDisplay" class="name"></div>
    <script src="script.js"></script>
</body>
</html>


<script>
function handleFile(input) {
    const file = input.files[0];

    if (file) {
        const reader = new FileReader();

        reader.onload = function(e) {
            const csvContent = e.target.result;
            const csvArray = parseCSV(csvContent);
            displayCSVData(csvArray);
        };

        reader.readAsText(file);
    }
}

function parseCSV(csvContent) {
    const lines = csvContent.split('\n');
    const csvArray = [];

    lines.forEach(function(line) {
        const cells = line.split(',');
       // csvArray.push(cells);
    });

    return csvArray;
}

function displayCSVData(csvArray) {
	const objectDisplay = document.getElementById('objectDisplay');
	
    console.log(csvArray); // 打印CSV数据数组到控制台
	for( let i = 0; i<csvArray.length-1 ; i++){
	 
		 const div1 = document.createElement('div');
		 div1.classList.add("name1"); // 添加自定义样式类名
		 
		 const div2 = document.createElement('div');
		  div2.classList.add("name2");
		 const div3 = document.createElement('div');
		  div3.classList.add("name3");
		 div1.textContent = `${[i+1]} : ${csvArray[i][1]} `;
		 objectDisplay.appendChild(div1);
		 if(csvArray[i][0] == '判断题'){
			  div2.textContent = ` A: ${csvArray[i][2]}, B: ${csvArray[i][3]},`
		 }else{
			 div2.textContent = ` A: ${csvArray[i][2]}, B: ${csvArray[i][3]},C: ${csvArray[i][4]},D: ${csvArray[i][5]},  `;
		 }
		 objectDisplay.appendChild(div2);
		 div3.textContent = ` 正确答案: ${csvArray[i][6]} `;
	
		 
		 objectDisplay.appendChild(div3);
	}

	
}

</script>
<style>
	.name{
		background-color: azure;
	}
	.name1{
		line-height: 25px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.name2{
		margin-bottom: 10px;
	}
	.name3{
		margin-bottom: 20px;
		 
	}
</style>