使用JavaScript保存文本文件到本地的两种方法

2023年5月27日上午6:29 • JavaScript

下面是使用JavaScript保存文本文件到本地的两种方法的详细攻略：

1. 使用Blob对象保存文本文件

Blob对象简介

Blob是Binary Large Object的缩写，表示二进制大对象。它是一种类文件对象，可以存储任意的二进制数据，如图片、视频、文本等。我们可以利用Blob对象来保存文本文件到本地。

实现步骤

创建Blob对象：可以使用Blob()构造函数或者BlobBuilder()方法来创建Blob对象，BlobBuilder()已被废弃，推荐使用构造函数进行创建。

let blob = new Blob([content], { type: 'text/plain' })

其中，content表示需要保存的文本信息，type指定了Blob的类型。

创建a标签：使用createObjectURL()方法将Blob对象转化为URL。

let url = window.URL.createObjectURL(blob)
let a = document.createElement('a')

设置a标签的属性值：设置下载的文件名，以及点击a标签时下载文件。

a.href = url
a.download = filename
a.click()

释放URL：使用revokeObjectURL()方法释放URL。

window.URL.revokeObjectURL(url)

示例说明

以下示例，我们将通过文本框中的输入信息保存为txt格式的文件。代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用Blob对象保存文本文件</title>
</head>
<body>
    <textarea id="text"></textarea>
    <button id="save_btn">保存文件</button>
    <script>
        const saveFile = () => {
            let data = document.getElementById('text').value
            let blob = new Blob([data], { type: 'text/plain' })
            let url = window.URL.createObjectURL(blob)
            let filename = 'file.txt'
            let a = document.createElement('a')
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
        }
        document.getElementById('save_btn').addEventListener('click', saveFile)
    </script>
</body>
</html>

2. 使用FileSaver.js保存文本文件

FileSaver.js简介

FileSaver.js 是由 Eli Grey 开发的，提供了一种不需要服务器参与的方案，从客户端直接保存文件到本地。

实现步骤

导入FileSaver.js库：在标签中导入FileSaver.js库文件。

<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.js"></script>

保存文件：使用saveAs()方法保存文件。

let filename = 'file.txt'
let blob = new Blob([content], { type: 'text/plain' })
saveAs(blob, filename)

示例说明

以下示例，我们将通过文本框中的输入信息保存为txt格式的文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用FileSaver.js保存文本文件</title>
    <script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.js"></script>
</head>
<body>
    <textarea id="text"></textarea>
    <button id="save_btn">保存文件</button>
    <script>
        const saveFile = () => {
            let data = document.getElementById('text').value
            let blob = new Blob([data], { type: 'text/plain' })
            let filename = 'file.txt'
            saveAs(blob, filename)
        }
        document.getElementById('save_btn').addEventListener('click', saveFile)
    </script>
</body>
</html>

以上就是使用JavaScript保存文本文件到本地的两种方法，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JavaScript保存文本文件到本地的两种方法 - Python技术站