一、HTML与文件下载

如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的 download 属性，例如： 
<a href="large.jpg" download>下载</a>

如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），对于动态内容，就无能为力。

例如，我们对页面进行分享的时候，希望分享图片是页面内容的实时截图，此时，这个图片就是动态的，纯HTML显然是无法满足我们的需求的，借助JS和其它一些HTML5特性，例如，将页面元素转换到canvas上，然后再转成图片进行下载。

但本文要介绍的下载不是图片的下载，而是文本信息的下载，所需要使用的HTML特性不是canvas，而是其它。

二、借助HTML5 Blob实现文本信息文件下载

原理其实很简单，我们可以将文本或者JS字符串信息借助Blob转换成二进制，然后，作为 <a> 元素的 href 属性，配合 download 属性，实现下载。 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JS前端创建html或json文件并浏览器导出下载</title> 
		<style>
			textarea {
				max-width: 600px;
				width: 100%;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
				font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
			}
			
			input[type="button"] {
				font-size: 100%;
				height: 36px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<textarea rows="11">
				<!DOCTYPE html>
                   <html>
                     <head>
                        <meta charset="utf-8">
                        <title>测试</title>
                      </head>

                 <body>
                    <h1>测试</h1>
                 </body>
                </html>
			</textarea>
			<p><input type="button" value="作为test.html文件下载"></p>
		</div>
		<script>
			var eleTextarea = document.querySelector('textarea');
			var eleButton = document.querySelector('input[type="button"]');

			// 下载文件方法
			var funDownload = function(content, filename) {
				var eleLink = document.createElement('a');
				eleLink.download = filename;
				eleLink.style.display = 'none';
				// 字符内容转变成blob地址
				var blob = new Blob([content]);
				eleLink.href = URL.createObjectURL(blob);
				// 触发点击
				document.body.appendChild(eleLink);
				eleLink.click();
				// 然后移除
				document.body.removeChild(eleLink);
			};

			if('download' in document.createElement('a')) {
				// 作为test.html文件下载
				eleButton.addEventListener('click', function() {
					funDownload(eleTextarea.value, 'test.html');
				});
			} else {
				eleButton.onclick = function() {
					alert('浏览器不支持');
				};
			}
		</script>
	</body>

</html>
content  指需要下载的文本或字符串内容， filename 指下载到系统中的文件名称，点击“下载”按钮，会把文本域中的内容全部作为一个.html后缀文件下载下来。

三、Blob对象

Blob 对象相当于一个容器，可以用于存放二进制数据。它有两个属性，size 属性表示字节长度，type 属性表示 MIME 类型。
如何创建：Blob 对象可以使用 Blob() 构造函数来创建

var blob = new Blob(['hello'], {type:"text/plain"});
Blob 构造函数中的第一个参数是一个数组，可以存放 ArrayBuffer对象、ArrayBufferView 对象、Blob对象和字符串。
Blob 对象可以通过 slice() 方法来返回一个新的 Blob 对象。  

var newblob = blob.slice(0,5, {type:"text/plain"});
slice() 方法使用三个参数，均为可选。第一个参数代表要从Blob对象中的二进制数据的起始位置开始复制，第二个参数代表复制的结束位置，第三个参数为 Blob 对象的 MIME 类型。
canvas.toBlob() 也可以创建 Blob 对象。toBlob() 使用三个参数，第一个为回调函数，第二个为图片类型，默认为 image/png，第三个为图片质量，值在0到1之间。 

var canvas = document.getElementById('canvas');canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);
下载文件
Blod 对象可以通过 window.URL 对象生成一个网络地址，结合 a 标签的 download 属性来实现下载文件功能。

比如把 canvas 下载为一个图片文件

var canvas = document.getElementById('canvas');
			canvas.toBlob(function(blob) {
				// 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36var 
				url = URL.createObjectURL(blob);
				var a = document.createElement('a');
				a.download = 'canvas';
				a.href = url; // 模拟a标签点击进行下载
				a.click(); // 下载后告诉浏览器不再需要保持这个文件的引用了
				URL.revokeObjectURL(url);
			});

四、结束语

不止是 .html 文件， .txt , .json 等只要内容是文本的文件，都是可以利用这种小技巧实现下载的。
在Chrome浏览器下，模拟点击创建的 <a> 元素即使不 append 到页面中，也是可以触发下载的，但是在Firefox浏览器中却不行，因此，上面的 funDownload () 方法有一个 appengChild 和 removeChild 的处理，就是为了兼容Firefox浏览器。



GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区