快捷導(dǎo)航

使用JS將字符串保存成文件到本地(.txt、.json、.md)

更新時(shí)間：2023年06月15日 14:32:53 作者：一顆不甘墜落的流星

工作中有時(shí)需要通過(guò)JavaScript保存文件到本地,下面這篇文章主要給大家介紹了關(guān)于使用JS將字符串保存成文件到本地的相關(guān)資料，分別包括生成.txt、.json、.md等文件,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、生成 TXT 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保存文件</title>
	</head>
	<body>
		<button type="button" id="button"> 保存文件</button>
		<script type="text/javascript">
			window.onload = function(event) {
				main()
			}
			function main() {
				// 獲取按鈕
				const button = document.getElementById('button')
				// 給按鈕添加點(diǎn)擊事件
				button.onclick = () => {
					// 要保存的字符串
					const stringData = '一段文本.'
					// dada 表示要轉(zhuǎn)換的字符串?dāng)?shù)據(jù)，type 表示要轉(zhuǎn)換的數(shù)據(jù)格式
					const blob = new Blob([stringData], {
						type: "text/plain;charset=utf-8"
					})
					// 根據(jù) blob生成 url鏈接
					const objectURL = URL.createObjectURL(blob)
					// 創(chuàng)建一個(gè) a 標(biāo)簽Tag
					const aTag = document.createElement('a')
					// 設(shè)置文件的下載地址
					aTag.href = objectURL
					// 設(shè)置保存后的文件名稱
					aTag.download = "文本文件.txt"
					// 給 a 標(biāo)簽添加點(diǎn)擊事件
					aTag.click()
					// 釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。
					// 當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。
					URL.revokeObjectURL(objectURL)
				}
			}
		</script>
	</body>
</html>

二、生成 JSON 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保存文件</title>
	</head>
	<body>
		<button type="button" id="button"> 保存文件</button>
		<script type="text/javascript">
			window.onload = function(event) {
				main()
			}
			function main() {
				// 獲取按鈕
				const button = document.getElementById('button')
				// 給按鈕添加點(diǎn)擊事件
				button.onclick = () => {
					// 要保存的字符串, 需要先將數(shù)據(jù)轉(zhuǎn)成字符串
					const stringData = JSON.stringify([{name: "張三",age: 18}], null, 2)
					// dada 表示要轉(zhuǎn)換的字符串?dāng)?shù)據(jù)，type 表示要轉(zhuǎn)換的數(shù)據(jù)格式
					const blob = new Blob([stringData], {
						type: 'application/json'
					})
					// 根據(jù) blob生成 url鏈接
					const objectURL = URL.createObjectURL(blob)
					// 創(chuàng)建一個(gè) a 標(biāo)簽Tag
					const aTag = document.createElement('a')
					// 設(shè)置文件的下載地址
					aTag.href = objectURL
					// 設(shè)置保存后的文件名稱
					aTag.download = "json文件.json"
					// 給 a 標(biāo)簽添加點(diǎn)擊事件
					aTag.click()
					// 釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。
					// 當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。
					URL.revokeObjectURL(objectURL)
				}
			}
		</script>
	</body>
</html>

三、生成 Markdown 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保存文件</title>
	</head>
	<body>
		<button type="button" id="button"> 保存文件</button>
		<script type="text/javascript">
			window.onload = function(event) {
				main()
			}
			function main() {
				// 獲取按鈕
				const button = document.getElementById('button')
				// 給按鈕添加點(diǎn)擊事件
				button.onclick = () => {
					// 要保存的字符串
					const stringData = '# 一級(jí)標(biāo)題\n## 二級(jí)標(biāo)題'
					// dada 表示要轉(zhuǎn)換的字符串?dāng)?shù)據(jù)，type 表示要轉(zhuǎn)換的數(shù)據(jù)格式
					const blob = new Blob([stringData], {
						type: 'text/markdown'
					})
					// 根據(jù) blob生成 url鏈接
					const objectURL = URL.createObjectURL(blob)
					// 創(chuàng)建一個(gè) a 標(biāo)簽Tag
					const aTag = document.createElement('a')
					// 設(shè)置文件的下載地址
					aTag.href = objectURL
					// 設(shè)置保存后的文件名稱
					aTag.download = "markdown文件.md"
					// 給 a 標(biāo)簽添加點(diǎn)擊事件
					aTag.click()
					// 釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象。
					// 當(dāng)你結(jié)束使用某個(gè) URL 對(duì)象之后，應(yīng)該通過(guò)調(diào)用這個(gè)方法來(lái)讓瀏覽器知道不用在內(nèi)存中繼續(xù)保留對(duì)這個(gè)文件的引用了。
					URL.revokeObjectURL(objectURL)
				}
			}
		</script>
	</body>
</html>