【JS】将字符串保存成文件到本地（.txt、.json、.md...）_js保存数据到本地文件

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

爱喝酒的甜瓜 · 控制按钮只打开一个子页面（window.op ...· 6 天前 ·

稳重的警车 · 【QT】如何自定义QMessageBox的窗 ...· 4 天前 ·

英姿勃勃的勺子 · Qt：31---QMessageBox消息对 ...· 4 天前 ·

活泼的泡面 · 19.PyQt5【基本组件】消息对话框-QM ...· 4 天前 ·

沉稳的香菜 · js中如何实现刷新父页面刷新 | ...· 昨天 ·

鼻子大的甘蔗 · Android之Drawable、Bitma ...· 2 周前 ·

愤怒的消炎药 · print-color-adjust - ...· 1 月前 ·

果断的风衣 · How to Fix Undefined ...· 2 月前 ·

精明的花卷 · awesome-it-blog/java/关 ...· 5 月前 ·

玩命的水桶 · SRTST-110VDC-1H1D-1H1D ...· 8 月前 ·

< button type = " button " id = " button " > 保存文件 </ button > < script type = " text/javascript " > window . onload = function ( event ) { main ( ) function main ( ) { // 获取按钮 const button = document . getElementById ( 'button' ) // 给按钮添加点击事件 button . onclick = ( ) => { // 要保存的字符串 const stringData = '一段文本.' // dada 表示要转换的字符串数据，type 表示要转换的数据格式 const blob = new Blob ( [ stringData ] , { type : "text/plain;charset=utf-8" // 根据 blob生成 url链接 const objectURL = URL . createObjectURL ( blob ) // 创建一个 a 标签Tag const aTag = document . createElement ( 'a' ) // 设置文件的下载地址 aTag . href = objectURL // 设置保存后的文件名称 aTag . download = "文本文件.txt" // 给 a 标签添加点击事件 aTag . click ( ) // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。 // 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。 URL . revokeObjectURL ( objectURL ) </ script > </ body > </ html >

二、生成 JSON 文件

<!DOCTYPE html>
		<meta charset="utf-8">
		<title>保存文件</title>
	</head>
		<button type="button" id="button"> 保存文件</button>
		<script type="text/javascript">
			window.onload = function(event) {
				main()
			function main() {
				// 获取按钮
				const button = document.getElementById('button')
				// 给按钮添加点击事件
				button.onclick = () => {
					// 要保存的字符串, 需要先将数据转成字符串
					const stringData = JSON.stringify([{name: "张三",age: 18}], null, 2)
					// dada 表示要转换的字符串数据，type 表示要转换的数据格式
					const blob = new Blob([stringData], {
						type: 'application/json'
					// 根据 blob生成 url链接
					const objectURL = URL.createObjectURL(blob)
					// 创建一个 a 标签Tag
					const aTag = document.createElement('a')
					// 设置文件的下载地址
					aTag.href = objectURL
					// 设置保存后的文件名称
					aTag.download = "json文件.json"
					// 给 a 标签添加点击事件
					aTag.click()
					// 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
					// 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
					URL.revokeObjectURL(objectURL)
		</script>
	</body>
</html>
三、生成 Markdown 文件
 
<!DOCTYPE html>
		<meta charset="utf-8">
		<title>保存文件</title>
	</head>
		<button type="button" id="button"> 保存文件</button>
		<script type="text/javascript">
			window.onload = function(event) {
				main()
			function main() {
				// 获取按钮
				const button = document.getElementById('button')
				// 给按钮添加点击事件
				button.onclick = () => {
					// 要保存的字符串
					const stringData = '# 一级标题\n## 二级标题'
					// dada 表示要转换的字符串数据，type 表示要转换的数据格式
					const blob = new Blob([stringData], {
						type: 'text/markdown'
					// 根据 blob生成 url链接
					const objectURL = URL.createObjectURL(blob)
					// 创建一个 a 标签Tag
					const aTag = document.createElement('a')
					// 设置文件的下载地址
					aTag.href = objectURL
					// 设置保存后的文件名称
					aTag.download = "markdown文件.md"
					// 给 a 标签添加点击事件
					aTag.click()
					// 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
					// 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
					URL.revokeObjectURL(objectURL)
		</script>
	</body>
</html>
				话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。
因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。
首先说读取文件。W3C提供了一些File API，其中最重要的是FileRe
				欢迎访问我的个人博客：http://www.xiaolongwu.cn
最近在做一个项目，有个需求就是，前端在内存中维护了一个很复杂的json对象，当点击下载按钮时，需要把这个json对象保存到文本中并下载到本地。
总结了两种实现方式
假如在我们项目中有个json对象如下：
    var jsonObj = {
				以下是uni.requestPayment的介绍和示例代码：
uni.requestPayment是uni-app中用于发起支付请求的API，支持微信支付、支付宝支付和银联支付。调用该API前需要先在manifest.json文件中配置支付相关的参数。
示例代码：
```javascript
uni.requestPayment({
    provider: 'wxpay', // 支付服务提供商，目前仅支持微信支付
    timeStamp: 'xxxxxx', // 时间戳，自1970年以来的秒数
    nonceStr: 'xxxxxx', // 随机字符串
    package: 'xxxxxx', // 统一下单接口返回的 prepay_id 参数值，格式如：prepay_id=xxx
    signType: 'MD5', // 签名算法，仅支持MD5
    paySign: 'xxxxxx', // 签名
    success: function(res) {
        // 支付成功
    fail: function(res) {
        // 支付失败
            【Git】报错：Module not found: Error: Can‘t resolve ‘echarts‘ in ‘node_modules/echarts-for-react/esm‘
            【React】监听浏览器返回事件