javascript 实现原生下载的各种情况

还记得第一次做文档下载的时候，基于windows.open('download_url')的方式下载。在某天某月某日，有领导突然review我的代码，此种方式遭到吐槽，尴尬不已。才痛下决心决定梳理一下前台的下载功能

windows.open缺点 1.用户交互不友好 2.对于图片类型的文件，会直接打开浏览器，而不是下载等等，自己领悟

下方的方式很多，请根据实际业务需求动态选择

1：一般通过a标签的方式下载，利用H5的Download属性

代码示例如下：

场景：适用于现代浏览器，url是下载地址，而不是文件流

 1 function downLoad(downUrl, fileName) {
 2   let a = document.createElement("a");// 创建a标签
 3   if ('download' in a) {
 4     a.download = fileName;// 设置下载文件的文件名
 5   }
 6   (document.body || document.documentElement).appendChild(a);
 7   a.href = downUrl;// downUrl为后台返回的下载地址
 8   a.click();// 设置点击事件
 9   a.remove(); // 移除a标签
10 }
11 
12 downLoad(URL, 'test.xlxs') //URL下载地址

如果后台给的是文件流，则利于Blob对象包装一下文件流

代码示例如下：

 1 function downLoad(content, fileName) {
 2   let a = document.createElement("a"),// 创建a标签
 3       blob = new Blob([content]);  //用Blob对象包装一下文件流
 4 
 5   if ('download' in a) {
 6     a.download = fileName;// 设置下载文件的文件名
 7   }
 8   (document.body || document.documentElement).appendChild(a);
 9   a.href = URL.createObjectUrl(blob);;// content为后台返回的文件流
10   a.click();// 设置点击事件
11   a.remove(); // 移除a标签
12 }
13 downLoad('我是文件流我是文件流', 'test.txt')

2：借助Base64实现文件的下载

对于非文本文件，也是可以借助JS下载的，比如下载图片，前端直接可以转化为base64然后下载

直接上实例代码吧，应该都看得懂，我就不多说了，

代码来自张鑫旭的关于下载的博文，可以直接查看

 1 function download (domImg, filename) {
 2   // 创建隐藏的可下载链接
 3   let eleLink = document.createElement('a');
 4   eleLink.download = filename;
 5   eleLink.style.display = 'none';
 6   // 图片转base64地址
 7   let canvas = document.createElement('canvas');
 8   let context = canvas.getContext('2d');
 9   let width = domImg.naturalWidth;
10   let height = domImg.naturalHeight;
11   context.drawImage(domImg, 0, 0);
12   // 如果是PNG图片，则canvas.toDataURL('image/png')
13   eleLink.href = canvas.toDataURL('image/jpeg');
14   // 触发点击
15   document.body.appendChild(eleLink);
16   eleLink.click();
17   // 然后移除
18   document.body.removeChild(eleLink);
19 };

 

 

 

 

标签：原生,文件,document,javascript,let,download,eleLink,下载
来源： https://www.cnblogs.com/ajaxkong/p/11686041.html