JS前端创建html或json文件并浏览器导出下载

一、HTML与文件下载

如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的 download 属性,例如:
下载

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

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

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

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

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



	
		
		JS前端创建html或json文件并浏览器导出下载 
		
	

	
		

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浏览器下,模拟点击创建的
元素即使不 append 到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的 funDownload () 方法有一个 appengChild removeChild 的处理,就是为了兼容Firefox浏览器。



你可能感兴趣的:(JS前端创建html或json文件并浏览器导出下载)