小tip:JS前端创建html或json文件并浏览器导出下载
一、HTML与文件下载
download
属性,例如:
<a href="large.jpg" download>下载</a>
具体介绍可参考我之前的文章:“了解HTML/HTML5中的download属性”。
但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力。
canvas
上,然后再转成图片进行下载。canvas
,而是其它。
二、借助HTML5 Blob实现文本信息文件下载
如果对Blob不了解,可以先看看我好些年之前写的“理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型”一文。
<a>
元素的href
属性,配合download
属性,实现下载。
代码也比较简单,如下示意(兼容Chrome和Firefox):
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);
};
content
指需要下载的文本或字符串内容,filename
指下载到系统中的文件名称。
万般言语不达意,一枚实例来走心。
您可以狠狠地点击这里:基于funDownload实现的html格式文件下载demo
.html
后缀文件下载下来,各流程效果如下面几张图:
test.html
。
然后对应保存目录就多了个类似下图的文件:
test.html
文件可以在浏览器中正常浏览,说明,保存信息无误。
触发下载的JS代码就几行:
button.addEventListener('click', function () { funDownload(textarea.value, 'test.html'); });
三、借助Base64实现任意文件下载
对于非文本文件,也是可以直接JS触发下载的,例如,如果我们想下载一张图片,可以把这张图片转换成base64格式,然后下载。
代码示意:
var funDownload = function (domImg, filename) {
// 创建隐藏的可下载链接
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 图片转base64地址
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var width = domImg.natureWidth;
var height = domImg.natureHeight;
context.drawImage(domImg, 0, 0);
// 如果是PNG图片,则context.toDataURL('image/png')
eleLink.href = context.toDataURL('image/jpeg');
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
四、结束语
.html
文件,.txt
, .json
等只要内容是文本的文件,都是可以利用这种小技巧实现下载的。<a>
元素即使不append
到页面中,也是可以触发下载的,但是在Firefox浏览器中却不行,因此,上面的funDownload()
方法有一个appendChild
和removeChild
的处理,就是为了兼容Firefox浏览器。download
属性从Edge13开始支持,理论上,edge也应该支持直接JS触发的浏览器文件下载,但我手头上并无相关浏览器,无法确定真实情况如何,欢迎有条件的小伙伴帮忙测下告知结果。
就这些吧,感谢阅读!