前端读取文件,并保存文件(不使用后端,使用浏览器提供的APi)

120 阅读1分钟

参考链接:blog.csdn.net/ALLENJIAO/a…

	<body>
		<input type="file" name="" id="inp" /><br />
		<button id="save">save</button><br />

		<textarea name="" id="textarea" cols="60" rows="30"></textarea>
		<script>
			const inp = document.getElementById('inp')
			const save = document.getElementById('save')
			const textarea = document.getElementById('textarea')
			inp.addEventListener('change', function(e) {
				const reader = new FileReader()
				reader.readAsText(e.target.files[0])
				reader.onload = function() {
					const info = this.result
					textarea.value = info
				}
			})
			save.addEventListener('click', function() {
				export_raw('range.json', textarea.value)
			})

			function export_raw(name, data) {
				var urlObject = window.URL || window.webkitURL || window
				var export_blob = new Blob([data])
				var save_link = document.createElementNS(
					'http://www.w3.org/1999/xhtml',
					'a'
				)
				save_link.href = urlObject.createObjectURL(export_blob)
				save_link.download = name
				fake_click(save_link)
			}
			function fake_click(obj) {
				var ev = document.createEvent('MouseEvents')
				ev.initMouseEvent(
					'click',
					true,
					false,
					window,
					0,
					0,
					0,
					0,
					0,
					false,
					false,
					false,
					false,
					0,
					null
				)
				obj.dispatchEvent(ev)
			}
		</script>
	</body>