Question

我有一个带有表单和输入数量的Web应用程序：

<form action="">
    Title1:<br>
    <input type="text" name="title1">
    <input type="text" name="title1Description">
    <br>
    Title2:<br>
    <input type="text" name="title2">
    <input type="text" name="title3Description">
    <br>
    Title3:<br>
    <input type="text" name="title3">
    <input type="text" name="title3Description">
    <br>
    <button type="button">Insert an Generate!</button> 
</form>

我还有一个充当模板的JavaScript文件：

template.js

function myFunction(p1, p2) {
    return p1 * p2;
}

function mySecondFunction(p3, p4) {
    return p3 - p4;
}

var myData = {
    *title1* : {
        Title: *title1*,
        Description: *title1Description*
    },
    *title2* : {
        Title: *title2*,
        Description: *title2Description*
    },
}

当用户点击按钮时，如何生成template.js的副本，将用户输入的值插入var myData的 xxxxx 部分，并提示用户下载新的生成文件？

如果这比jQuery更容易，我可以使用AngularJS吗？

Answer 1

我不会写完整个代码，但这就是我在想的：

单击该按钮时，您可以传递值，例如使用GET变量。点击here了解其工作原理。

接下来，您可以将js文件的整个代码保存在String中，并使用GET变量中的值。

最后但并非最不重要的是，使用以下代码下载包含生成的字符串str的文件：

window.open('data:text/csv,' + encodeURIComponent(str));

修改上述解决方案无法使用自定义文件名存储文件。如果你想要实现这一点，你需要一些解决方法，因为你需要使用<a>的下载属性：

var link = document.createElement("a"); var csv = "data:text/csv;charset=utf-8," + str; link.setAttribute("href", encodeURI(csv)); link.setAttribute("download", "template.js"); //custom file name here link.click();

请注意，并非每个浏览器都支持下载属性。查看here了解详情。

<强> EDIT2 好吧，我写了代码，因为我度过了美好的一天而且没什么可做的;）你可以找到它here（jsFiddle给我带来麻烦）

将值插入JavaScript文件模板并生成新文件

1 个答案: