js浏览器下载jpg, png, txt文件踩坑（尝试了百度的各种方法，以下总结2个靠谱点的）

使用a标签下载jpg，png , txt 格式文件的话，因为浏览器机制的原因，会直接打开文件而不是下载！（如果是相对路径的文件，使用a标签的href则能正常下载）

网络图片jpg,png下载

例如let imgSrc = "https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg"图片路径

第一步 先将图片转为base64格式

//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
function getBase64Image(img, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width ? width : img.width;
    canvas.height = height ? height : img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    return dataURL;
}
function getCanvasBase64(img) {
   var image = new Image();
    image.crossOrigin = '';
    image.src = img;
    var deferred = $.Deferred();
    if (img) {
        image.onload = function () {
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
    }
}
getCanvasBase64(imgSrc).then(function (base64) {
    // 这里拿到的是转换后的base64地址，可以做其他操作
    // $("#ceshi").attr('herf',base64)
    console.log("base64", base64);
}, function (err) {
    console.log(err);
});

$.Deferred()可以看阮一峰笔记有详细介绍deferred介绍

第二步 将base64转为blob对象

//base64转blob
function base64ToBlob(code) {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;

  let uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
}

blob详细介绍参考 blob对象

第三步 创建a标签进行下载

//下载 fileName为下载文件的名称
function downloadFile(fileName, content) {
   let aLink = document.createElement('a');
   // var blob = new Blob([content]); txt下载使用这种方式
   var blob = base64ToBlob(content); //图片下载使用base64转blob
   let evt = document.createEvent("HTMLEvents");
   evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
   aLink.download = fileName;
   
   aLink.href = URL.createObjectURL(blob);
   aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
 }
 
注意：有些网络图片因为服务器限制，转base64时会报跨域错误，此时则需要管理服务器人员修改跨域问题

第四步 定义一个点击事件调用第三步方法

<span id="download">下载</span>
 $("#download").on('click',function(){
    downloadFile('我是名称', aa);
 })

txt文件下载问题

注意事项
例如这种后台返回路径https://xxxx.xxx.cn/beta/00000000-0000-0000-0000-000000000000/xxx/default/e18f3aca-f53f-41ce-a1d3-0074ebc7b521.txt
是不能直接下载，需要后端返回文档流的格式

下面介绍文档流如何创建txt并且下载 也可以使用下载图片的第三步，注释位置放开

 //下载文本
 function funDownload (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);
 };

 <span id="download">下载</span>
 $("#download").on('click',function(){
    funDownload('文档流或者字符串', 'txt文件名称');
 })

以上方法仅供小白参考，仅为记录作用，希望能帮助到需要的人