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

最新推荐文章于 2024-06-02 02:17:28 发布

奔雷手.文泰来

最新推荐文章于 2024-06-02 02:17:28 发布

阅读量1w

点赞数 5

分类专栏： JS前端创建html或json文件并浏览器导出下载文章标签： JS前端创建html或json文件并浏览 download

JS前端创建html或json文件并浏览器导出下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、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浏览器。

奔雷手.文泰来

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
JS前端创建html或json文件并浏览器导出下载

一、HTML与文件下载如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：下载如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），对于动态内容，就无能为力。例如，我们对页面进行分享的时候，希望分享图片是页面内容的实时截图，此时，这个图片就是动态的，纯HTML显然是无法满足我们的需求的，借助JS和其它一些HT
复制链接

扫一扫

专栏目录