如何用JavaScript纯前端来实现下载脚本

1、javascript脚本

function downloadFile(data, fileName, type="text/plain") {
 // 创建不可见的元素
 const a = document.createElement("a");
 a.style.display = "none";
 document.body.appendChild(a);
 // 将href设置为要下载数据的blob表示形式
 a.href = window.URL.createObjectURL(
 new Blob([data], { type })
 );
 // 使用下载属性设置所需的文件名
 a.setAttribute("download", fileName);
 // 通过模拟点击触发下载
 a.click();
 // 清理
 window.URL.revokeObjectURL(a.href);
 document.body.removeChild(a);
}

2、html元素

<form onsubmit="onFormSubmit(); return false;">
		<p>
			<label for="demo_filename">文件名称：</label><br>
			<input type="text" id="demo_filename">
		</p>
		<p>
			<label for="demo_content">内容：</label><br>
			<textarea id="demo_content"></textarea>
		</p>
		<button type="submit">下载</button>
	</form>

 

3、运行效果

 

是不是很简单，这样做的函数非常小，并且依赖于URL.createObjectUrl，函数注入<a>元素，将其设置为Blob值设置为目标文件的文本内容，并单击下载按钮以触发下载。元素在过程中保持隐藏状态，并在click()调用，一旦函数被调用，浏览器的下载提示就会显示出来，createObjectURL和Blob这两种技术才是真正的魔力！