前端下载策略

@TOC

对于下载

• 首先，要搞清楚你要下载的是什么类型的文件。常见的要下载的文件包括：图片、excel、.pdf、.doc、其他
  其次，要清楚您要下载的文件在浏览器是否可以直接打开（如果不可以打开可以采取a标签的简单策略，但是不推荐）
• 再次，要清楚pd对交互的要求，是否允许有新tab页的弹出（弹出的交互效果不好，尽量不用）

一、最简化的方式

前提：浏览器打不开，允许在新页面弹出
方案：直接用打开链接的方式

1. <a href="你的链接"></a>

window.open(URL,name,features,replace)​window.open(URL,name,features,replace)
//  url: 代表url
// name: 新窗口的名字
// features: 新窗口的特性
// replace: 是否替换当前浏览器的历史记录

3. ​window.location.href

二、a标签 + download属性

优点：不打开新的标签页
缺点：不支持跨域资源的下载；兼容性不好

三、Blob的方式：

具体来说：

1. 可以用node的file模块的相关功能（优点：结合了前后端，都能控制）

var fs = require('fs');
var path = require('path');
router.get('/downloadfilerouter', function (req, res, next) {
   var filename = 'desktop.ini';
   var filepath = path.join(__dirname, '../uploader/' + filename);
   var stats = fs.statSync(filepath);
   if (stats.isFile()) {
       res.set({
           'Content-Type': 'application/octet-stream',
           'Content-Disposition': 'attachment; filename=' + filename,
           "Content-Length": stats.size
       });
       fs.createReadStream(filepath).pipe(res);
   } else {
       res.end(404);
   }
});

2. axios + blob + creatObjectUrl + a（注意ajax能够传递的数据类型，可能不包括blob ？？？初步解答：xml、html、script、JSON、jsonp、text、formdata ）

Axios.get(url, { responseType: 'blob',}).then((response) => {
    let blob = new Blob([response.data], {'type': 'application/octet-stream;charset=UTF-8'})
    let url = window.URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName);   // 给a标签加一个download属性
    link.click();                             //模拟点击
    window.URL.revokeObjectURL(link.href);

四、借助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.naturalWidth;
    var height = domImg.naturalHeight;
    context.drawImage(domImg, 0, 0);
    // 如果是PNG图片，则canvas.toDataURL('image/png')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
};

五、利用相关插件（组合式解决方案）

如，file-saver

隐藏的iframe（其原理是什么？？？）

前后端配合怎么配合（后端设置返回头，前端用什么请求的方式呢，ajax ？fetch？ axios？貌似blob的其中2就是这种情况，只不过后端是node）

form表单接受 ？？？

导出excel与导出图片，doc，html文件有什么区别，最常用的导出excel的方式是什么？

选择文件时进行类型、大小的判断

文件上传的各种方式：
jquery.form.js中对于input file类型的文件上传区分了几种方式
百度搜索：jquery.form.js input file
fileUploadIframe —— iframe

fileUploadXhr —— formdata

ajax