传媒一区二区在线视频,国产精品992TV在线观看

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

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

作者:admin 時間:2021-8-5 9:45:0 瀏覽:

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

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

demo download

為此，我們將編寫：

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

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

讓我們跳到代碼的實際部分。

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

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

function saveStaticDataToFile() {
}

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

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

1.3 現(xiàn)在調(diào)用saveAs以 blob 對象作為輸入的函數(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. 保存動態(tài)數(shù)據(jù)

要將用戶輸入的文本保存到文本文件中，首先，我們需要將用戶輸入的文本存儲到一個變量中，并將該變量作為Blob第一個參數(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>