js浏览器下载jpg, png, txt文件踩坑（尝试了百度的各种方法，以下总结2个靠谱点的）
使用a标签下载jpg，png , txt 格式文件的话，因为浏览器机制的原因，会直接打开文件而不是下载！（如果是相对路径的文件，使用a标签的href则能正常下载）
网络图片jpg,png下载
例如let imgSrc = ".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转bloblet 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文件下载问题
注意事项
例如这种后台返回路径.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文件名称');})
以上方法仅供小白参考，仅为记录作用，希望能帮助到需要的人
js浏览器下载jpg, png, txt文件踩坑（尝试了百度的各种方法，以下总结2个靠谱点的）
使用a标签下载jpg，png , txt 格式文件的话，因为浏览器机制的原因，会直接打开文件而不是下载！（如果是相对路径的文件，使用a标签的href则能正常下载）
网络图片jpg,png下载
例如let imgSrc = ".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转bloblet 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文件下载问题
注意事项
例如这种后台返回路径.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文件名称');})
以上方法仅供小白参考，仅为记录作用，希望能帮助到需要的人