因此，我想从 HTML 输入表单中获取几个值，并且基本上能够在用户单击包含输入表单的数据的按钮时生成 csv 文件以供用户下载。但是，我对如何解决这个问题感到困惑，并且在网上找不到好的指南。
如果可能的话，我还想自定义 csv 格式的格式，希望以某种方式知道我想要做什么!谢谢。
编辑:我不要求只在 html 中执行此操作，我认为 javascript 是最佳选择
我的 HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by <a href="https://mathewsjoy.herokuapp.com/">Mathews Joy</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<script src="index.js"></script>
</html>
最佳答案
document.querySelector("#download").addEventListener('click', generateCSV);
function generateCSV(e){
e.preventDefault();
const formdata = new FormData(document.getElementById('grade-form'));
const formObj = Object.fromEntries(formdata);
const len = Object.keys(formObj).length/2;
let formValues = '';
for(let i=1; i<= len; i++){
// comma separated values and break line
formValues += formObj['grade'+i] +','+formObj['credit'+i]+ "\r\n";
}
downloadCSV(formValues);
}
function downloadCSV(formValues){
const columnNames = "Grade (%), Weight (Credits)";
let csvContent = "data:text/csv;charset=utf-8,";
csvContent += columnNames + "\r\n";
csvContent += formValues + "\r\n";
const encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my-form-data.csv");
document.body.appendChild(link);
link.click();
// link.remove();
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>UniWeighter</title>
<link rel="icon" href="images/icon.ico">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"/>
<script
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>
</head>
<body>
<style>
body {
background-image: url("images/background.png");
}
</style>
<section class="section">
<div class="container is-centered is-mobile">
<div class="content has-text-centered">
<h1><b>UniWeighter</b></h1>
<h2>Weighted Average Grade Calculator</h2>
<hr>
<div class="box">
<p>
This Simple Grade Calculator will determine your average grade for your assignments,
end of year grade or end of university grade.
<br>
The weighted average simply takes into account how much each course is worth when calculating the average.
<br>
This calculator can also be used to calculate any weighted average, not just courses.
<br>
</p>
</div>
<div class="column is-two-quarter is is-offset-two-quarter is-mobile">
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="images/help.png" alt="Image">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>How does it actually work?</strong> <small>Just one example below</small>
<br>
Lets say you want to find a end of module final mark. You have 2 total exams/assignments for that module.
One worth <b>40%</b> weighting and you get <b>75/100</b> marks, the other worth <b>60%</b> weighting and you get <b>62/100</b>.
So you can type in 40 for the weight and 75 for the grade on first row, also 60 and 62 for the next row.
Press Calculate and you find you got an overall average mark of <b>67.2</b> and a grade of <b>2:1</b> for that module.
</p>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns is-centered">
<div class="column is-three-quarters">
<div class="card">
<br>
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">The Entry</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Grade (%)</h1>
</div>
<div class="column is-one-third has-text-centered is-size-5">
<h1 class="has-text-weight-semibold">Weight (Credits)</h1>
</div>
</div>
<div class="card-content">
<form id="grade-form">
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">1</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right ">
<input class="input" name="grade1" id="grade1" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit1" id="credit1" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade2" id="grade2" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit2" id="credit2" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">3</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade3" id="grade3" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit3" id="credit3" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">4</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade4" id="grade4" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit4" id="credit4" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">5</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade5" id="grade5" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit5" id="credit5" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">6</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade6" id="grade6" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit6" id="credit6" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">7</p>
Assignment/Module
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<input class="input" name="grade7" id="grade7" type="number" />
<span class="icon is-small is-right">
<i class="fa fa-percentage"></i>
</span>
</div>
</div>
</div>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-left ">
<input class="input" name="credit7" id="credit7" type="number" />
<span class="icon is-small is-left">
<i class="fas fa-coins"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="control">
<button id="submit" class="button is-large is-fullwidth is-primary is-outlined">
Calculate
</button>
</div>
<div class="control">
<button id="download" class="button is-large is-fullwidth is-primary is-outlined">
Get CSV file of data
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- RESULTS -->
<section class="section is-centered is-mobile is-paddingless">
<h1 class="title has-text-centered">Calculated Results</h1>
<div class="columns is-multiline is-centered">
<div class="column is-12-tablet is-6-desktop is-3-widescreen ">
<div class="notification is-success is-light has-text">
<p id="averageGrade" class="title is-1"><i class="fa fa-percentage"></i></p>
<p class="subtitle is-4">Average Grade</p>
</div>
</div>
<div class="column is-12-tablet is-6-desktop is-3-widescreen">
<div class="notification is-link is-light has-text">
<p id="formalGrade" class="title is-1"><i class="fas fa-graduation-cap"></i></p>
<p class="subtitle is-4">Formal Grade</p>
</div>
</div>
</div>
</section>
<br>
<div class="line" style="padding: 1%;">
<hr>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<br><br>
<strong>UniWeighter</strong> by <a href="https://mathewsjoy.herokuapp.com/">Mathews Joy</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <strong>Share -</strong>
<a href="https://twitter.com/intent/tweet?text=https%3A//uniweighter.netlify.app/" aria-label="reply">
<span class="icon is-small">
<i class="fab fa-twitter-square" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//uniweighter.netlify.app/" aria-label="retweet">
<span class="icon is-small">
<i class="fab fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//uniweighter.netlify.app/&title=Checkout%20Uniweighter!&summary=&source=" aria-label="like">
<span class="icon is-small">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</p>
</div>
</footer>
</body>
<!--<script src="index.js"></script>-->
</html>关于javascript - 如何从 html 表单中获取输入值并转换为 csv？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69319199/