Question

我有一张我希望能够离线下载的表单，应该与大多数（如果不是全部）浏览器兼容（特别是IE10,11）。我已经看到了一些不能在IE或Chrome上运行的解决方案。

我一直试图弄清楚如何在JQuery中做到这一点。用户打算填写表单，当他们提交时，表单应该在本地下载CSV文件。

不幸的是，我无法使用服务器或任何PHP，因此我使用了JQuery / JavScript。

这是我到目前为止所拥有的：

HTML5表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>

<div class="container-fluid">
    <form action="" id="formCsv" style="padding-top: 20px">
        <div class="form-group row">
            <label for="clientName" class="col-lg-1">Client Name</label>
            <div class="col-lg-3">
            <input type="text" name="Name" class="form-control" id="clientName" required>
            </div>
        </div>
        <div class="form-group row">
            <label for="clientEmail" class="col-lg-1">Client Email</label>
            <div class="col-lg-3">
                <input type="email" name="Email" class="form-control" id="clientEmail"  >
            </div>
        </div>
        <div class="form-group row">
            <label for="clientCountry" class="col-lg-1">Client Country</label>
            <div class="col-lg-3">
                <input type="text" name="Country" class="form-control" id="clientCountry" >
            </div>
        </div>
        <div class="form-group row">
            <label for="clientState" class="col-lg-1">Client State</label>
            <div class="col-lg-3">
                <input type="text" name="State" class="form-control" id="clientState" >
            </div>
        </div>
        <input class="btn btn-primary" id="Submit" type="button" value="Submit">
    </form>
</div>

<div id="results"></div>

<script src="formArray.js"></script>
</body>
</html>

获取输入并创建数组的JavaScript文件（formArray.js）

$(document).ready(function () {
    $("#Submit").click(function (e) {
        var x = $("form").serializeArray();
            $.each(x, function (i, field) {
                $("#results").append(field.name + ":" + field.value+ '</br>');
            });
    });
});

我如何拥有它，以便当用户点击＆＃34;提交＆＃34;时，会生成格式正确的CSV文件？

使用JQuery / JavaScript离线下载文件

0 个答案: