Javascript: 使用 FileSaver.js 将 text/blob 保存到文件
Javascript: Save a text/blob to a file using FileSaver.js
我已经构建了 2 个按钮 是 和 否。
我想将答案保存在文件中:是或否(当然取决于最终用户按下的按钮将按)
我已经使用了 Javascript 对象 blob 但无法正常工作:
The file testfile1.txt wasn't generated.
我有一个名为 js 的子文件夹(在我的主文件夹内),其中有文件 FileSaver.js.
出于这个原因,我有:
`src="js/FileSaver.js"`
在我的代码中实现。在我的代码下方:
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/FileSaver.js"></script>
</head>
<body>
<button id="save-btn"> yes </button>
<button id="save-btn1"> no </button>
<script>
$("save-btn").click(function{
var blob= new Blob(["yes"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
$("save-btn1").click(function{
var blob= new Blob(["no"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
</script>
</body>
</html>
提前致谢
您可以实现如下功能:
let content = 'abc';
const url = window.URL.createObjectURL(new Blob([content], {type: 'text/plain'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'log.txt'); //or any other extension
document.body.appendChild(link);
link.click();
我已经在 chrome 浏览器中对其进行了测试。
请检查一下。
我这样修改了你的代码。
*** 注意:我导入了 FileSaver.js
(downloaded from here) 并在不同的 js 文件中编写了按钮点击功能 (test.js)
这是我的代码,每次单击“是”或“否”按钮时,我都可以使用它下载包含输入数据的文本文件。
test.html
<head>
<body>
<button type="button" id="yesButton" value="Yes" onclick="saveYesInputDatataToFile();">Yes</button>
<button type="button" id="noButton" value="No" onclick="saveNoInputDataToile();">No</button>
<script src="test.js"></script>
<script src="FileSaver.js"></script>
</body>
</head>
test.js
function saveYesInputDatataToFile() {
var userInput = document.getElementById("yesButton").value;
var blob = new Blob([userInput],
{ type: "text/plain;charset=utf-8" });
saveAs(blob, "userInput.txt");
}
function saveNoInputDataToile() {
var userInput = document.getElementById("noButton").value;
var blob = new Blob([userInput],
{ type: "text/plain;charset=utf-8" });
saveAs(blob, "userInput.txt");
}
我已经构建了 2 个按钮 是 和 否。
我想将答案保存在文件中:是或否(当然取决于最终用户按下的按钮将按)
我已经使用了 Javascript 对象 blob 但无法正常工作:
The file testfile1.txt wasn't generated.
我有一个名为 js 的子文件夹(在我的主文件夹内),其中有文件 FileSaver.js.
出于这个原因,我有:
`src="js/FileSaver.js"`
在我的代码中实现。在我的代码下方:
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/FileSaver.js"></script>
</head>
<body>
<button id="save-btn"> yes </button>
<button id="save-btn1"> no </button>
<script>
$("save-btn").click(function{
var blob= new Blob(["yes"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
$("save-btn1").click(function{
var blob= new Blob(["no"],
{type:"text/plain;charset=utf-8"}
);
saveAs(blob,"testfile1.txt");
});
</script>
</body>
</html>
提前致谢
您可以实现如下功能:
let content = 'abc';
const url = window.URL.createObjectURL(new Blob([content], {type: 'text/plain'}));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'log.txt'); //or any other extension
document.body.appendChild(link);
link.click();
我已经在 chrome 浏览器中对其进行了测试。
请检查一下。
我这样修改了你的代码。
*** 注意:我导入了 FileSaver.js
(downloaded from here) 并在不同的 js 文件中编写了按钮点击功能 (test.js)
这是我的代码,每次单击“是”或“否”按钮时,我都可以使用它下载包含输入数据的文本文件。
test.html
<head>
<body>
<button type="button" id="yesButton" value="Yes" onclick="saveYesInputDatataToFile();">Yes</button>
<button type="button" id="noButton" value="No" onclick="saveNoInputDataToile();">No</button>
<script src="test.js"></script>
<script src="FileSaver.js"></script>
</body>
</head>
test.js
function saveYesInputDatataToFile() {
var userInput = document.getElementById("yesButton").value;
var blob = new Blob([userInput],
{ type: "text/plain;charset=utf-8" });
saveAs(blob, "userInput.txt");
}
function saveNoInputDataToile() {
var userInput = document.getElementById("noButton").value;
var blob = new Blob([userInput],
{ type: "text/plain;charset=utf-8" });
saveAs(blob, "userInput.txt");
}