JS前端创建html或json文件并浏览器导出下载
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
一、HTML与文件下载
如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的
download
属性,例如:
Blob 对象可以通过 slice() 方法来返回一个新的 Blob 对象。
canvas.toBlob() 也可以创建 Blob 对象。toBlob() 使用三个参数,第一个为回调函数,第二个为图片类型,默认为 image/png,第三个为图片质量,值在0到1之间。
Blod 对象可以通过 window.URL 对象生成一个网络地址,结合 a 标签的 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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)