99久久综合狠狠综合久久一区,国产乱子伦农村xxxx

技術(shù)頻道 - js技術(shù)

js保存文本到指定文件-兼容各瀏覽器

作者:admin 時(shí)間:2021-8-5 9:45:0 瀏覽:

在本教程中，我們將使用Javascript把網(wǎng)頁(yè)上指定的文本保存到文本文件中。

js保存文本到指定文件-兼容各瀏覽器

demo download

為此，我們將編寫：

在按鈕單擊事件上觸發(fā)的JavaScript函數(shù)。
創(chuàng)建一個(gè)Blob構(gòu)造函數(shù)，傳入網(wǎng)頁(yè)上指定的文本。
最后，調(diào)用FileSaver.js庫(kù)的函數(shù)。saveAs(Blob object, "your-file-name.text")

注意：為了把文本保存到文本文件中，這里使用了第三方FileSaver.js庫(kù)。

讓我們跳到代碼的實(shí)際部分。

1. 保存靜態(tài)數(shù)據(jù)

1.1 創(chuàng)建一個(gè)在按鈕點(diǎn)擊事件上執(zhí)行的函數(shù)。

function saveStaticDataToFile() {
}

1.2 實(shí)例化Blob對(duì)象，傳遞文本字符串作為第一個(gè)參數(shù)，blob類型作為第二個(gè)參數(shù)。

var blob = new Blob(["Hello Welcome."],
                { type: "text/plain;charset=utf-8" });

1.3 現(xiàn)在調(diào)用saveAs以 blob 對(duì)象作為輸入的函數(shù)，并讓你在 Web 瀏覽器上保存文件。

saveAs(blob, "static.txt");

查看完整的示例。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Create and Save text file in JavaScript</title>
    <script src="js/FileSaver.js"></script>

    <script>

        function saveStaticDataToFile() {
            var blob = new Blob(["Hello Welcome."],
                { type: "text/plain;charset=utf-8" });
            saveAs(blob, "static.txt");
        }

    </script>
</head>
<body>

    <button type="button" onclick="saveStaticDataToFile();">Click to Save</button>

</body>
</html>

2. 保存動(dòng)態(tài)數(shù)據(jù)

要將用戶輸入的文本保存到文本文件中，首先，我們需要將用戶輸入的文本存儲(chǔ)到一個(gè)變量中，并將該變量作為Blob第一個(gè)參數(shù)傳遞。

查看完整的代碼示例。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Create and Save text file in JavaScript</title>
    <script src="js/FileSaver.js"></script>
    <script>   
        function saveDynamicDataToFile() {

            var userInput = document.getElementById("myText").value;

            var blob = new Blob([userInput], { type: "text/plain;charset=utf-8" });
            saveAs(blob, "dynamic.txt");
        }

    </script>
</head>
<body>

    <textarea id="myText" rows="4" cols="50">
 We love to share our experiments, ideas, and knowledge with everyone by writing articles on the latest technology trends.
    </textarea>

    <button type="button" onclick="saveDynamicDataToFile();">Click to Save</button>

</body>
</html>