js 下载各种类型的文件到本地,和base64流的图片下载(包括IE)

js 下载Base64格式数据图片(兼容主流浏览器) 最近的工作内容和前端有关。需要做一个图片下载的功能,然而后台只提供了 byte[]  类型的图片数据,并且返回给前端的是Base64格式图片数据。那么,就遇到了最严重的问题了:浏览器兼容。 展示图片的时候,各个浏览器大家都一样,都可以这样来 然而,在提供下载的时候,总有人要搞事情(说的就是你啦——IE)。在经过多方搜索,解决了这个麻烦。 感谢这几个帖子的引导: http://ww 阅读详情

Chrome

通过a标签下载

使用js或者jq 都可以,这里演示一下jq的用法:

第一种

//fileType 是需要下载的文件类型 如txt格式传入text/plain,doc格式传入application/msword 等
//fileText 是文件内容
//fileName 是下载文件的名字
function downloadFile(fileType, fileText, fileName) {
    var downloadA = $('<a style="display:none"></a>').appendTo('body'); //创建标签
    downloadA.attr({ 'href': "data:" + fileType + ";charset=utf-8," + fileText, "download": fileName });
    downloadA[0].click(); //手动触发点击事件
    downloadA.remove(); //删除标签
}

downloadFile('text/plain', '文本内容。。。', '文件');  //调用

如果是下载base64流的图片:

var filePic = ''; //base64数据流
var fileName = '图片'; //要下载的图片名称
var downloadA = $('<a style="display:none"></a>').appendTo('body');
downloadA.attr({ 'href': "data:image/png;base64," + filePic, "download": fileName });
downloadA[0].click();
downloadA.remove();

第二种

//fileType 是需要下载的文件类型 如txt格式传入text/plain,doc格式传入application/msword 等
//fileText 是文件内容
//fileName 是下载文件的名字
function downloadFile(fileType, fileText, fileName) {
    var downloadA = $('<a style="display:none"></a>').appendTo('body');
    var data = new Blob([fileText],{type: fileType+";charset=UTF-8"});
    var downloadUrl = window.URL.createObjectURL(data);
    downloadA.attr({ 'href': downloadUrl, "download": fileName });
    downloadA[0].click();
    downloadA.remove();
}

// downloadFile('text/plain', '文本内容。。。', '文件');  //调用

IE

if(window.navigator.msSaveBlob){
    let blob = new Blob(['数据'], {type: "text/csv,charset=utf-8"});
    window.navigator.msSaveBlob(blob, '文件.txt');
}
JS -- base64实现图片下载功能 JS -- 实现图片下载功能 阅读详情

相关推荐

浏览器网页JavaScript实现Base64转图片并下载

浏览器网页JavaScript实现Base64转图片主要是利用canvas画板的特性和a标签实现。

eguid音视频方向博客,分享经过实践检验的硬核音视频技术。FFmpeg、openCV和JavaCV音视频和图像处理系列教程发布十周年,众多开发者的严格验证。欢迎关注,一起交流探索学习最新音视频和图像处理技术 2568

js实现base64图片的下载

js实现base64图片的下载

斌仔的小博客 3353

jquery.base64.js下载

本想免费分享,方便懒人同学的,居然必须2积分才能上传,也是醉了. 官网下载地址:http://plugins.jquery.com/base64/ 有完整实例. 资源上传时为最新版本. 再说一遍, 不想花费积分的可以去官网下载, 上边有地址 yo !

下载base64格式图片

&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width"&gt;     &lt;title&a

初学者的专栏 2890

R语言WGCNA实战:从基因表达矩阵到模块可视化全流程(附避坑指南)

本文详细介绍了使用R语言进行WGCNA(加权基因共表达网络分析)的完整实战流程,涵盖从基因表达矩阵预处理、软阈值选择、网络构建与模块识别,到模块与表型关联分析及结果可视化的关键步骤。文章重点解析了代码实现,并提供了针对数据质量检查、参数调整等常见问题的避坑指南,帮助生物信息学研究者高效挖掘基因共表达模块的生物学意义。

weixin_29062823的博客 580

手把手教你用CEFSharp打造防关联指纹浏览器(附完整代码)

本文详细介绍了如何基于CEFSharp框架,从零开始构建一个企业级的防关联指纹浏览器。通过剖析核心架构、多进程隔离实现、动态指纹混淆(如Canvas、WebGL)的实战代码,以及代理集成与性能优化,为跨境电商、广告投放等场景提供了一套可控、安全的开源解决方案。

fern8的博客 962

js下载base64格式的图片

反思了一下,突然想到我的AI服务器返回给我的是base64格式的图片,将base64格式的图片当成url复制给a标签的url。上述两种方法其实都是同一种原理,将图片的url赋值给a标签,然后模拟a标签的点击事件,调取下载功能。虽然上述代码可以下载图片,不过有些手机可能打开了云存储功能,下载的图片会直接保存在云空间。如果你的手机相册没有下载的图片可以去云空间(在网上也找了很多资料,下载图片的js代码和我的js代码大同小异。由于微信端(或者钉钉)无法通过js下载图片,要想在前端下载图片必须对接微信公众号的。

资深php_web工程师 810

告别龟速与断连:Arduino IDE下ESP32及ESP32-CAM一站式环境部署指南

本文提供Arduino IDE下ESP32及ESP32-CAM一站式环境部署指南,解决下载速度慢、断连等常见问题。通过国内镜像源加速、详细步骤讲解和ESP32-CAM专属配置技巧,帮助开发者快速完成环境搭建,避免常见陷阱,提升开发效率。

weixin_30576827的博客 771

JavaScript实现图片下载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片

五花漏的博客 2843

云计算虚拟化实验(一)——虚拟机软件VMware的安装以及虚拟机系统的安装(Windows7+CentOS7)

主要内容: 1、虚拟机软件的安装(以VMware为例) 2、虚拟机系统的安装(Window7 + CentOS7) 3、虚拟主机网络互访 4、不同局域网内的虚拟主机互访(软路由——海蜘蛛) 0 ——首先介绍一下什么是虚拟化? 虚拟化,是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。在一台计算机上同时运行多个逻辑计算机,每个逻辑计算机可运行不同的操作系统,并且应用程序都可以在

gg_asd的博客 1万+

深入剖析一个卷积块(ConvBlock)

深入剖析一个卷积块(ConvBlock)

qq_45670407的博客 1926

前端js保存页面为图片下载到本地

前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可将 htmldom 转为 canvas 元素。 canvasAPI:toDataUrl() 可将 canvas 转为 base64 格式 替换 html 为 img,src为 base...

weixin_30505485的博客 1419

机械拆装-基于Unity-总体设计

建立一个机械装配的场景

唐小墨同学的博客 2776

base64图片转换与下载(原生js实现下载至本地)

使用base64编码传输图片文件,在实际开发中也比较常见。在整个网站如果图片足够小复用性很高并且基本不会被更新(例如网站的logo)我们就可以考虑将图片转为base64编码

laizhenghua的博客 6093

Allegro 给元器件PCB封装库添加3D模型详细步骤

从上面视图可以看到模型跟PCB 库的方向是对了,但是位置偏下,且在PCB封装库后面,我们下面需要做的就是把模型往上移、往前移。首先将元器件3D模型文件放在封装库的目录下(也可以单独新建一个模型库文件夹),注意3D文件必须是Step格式。Transparent: 选择透视的对象,可以是模型、也可以是PCB封装,或者两种都透视。在左边搜索要添加的3D模型的文件(注意是在* 星号前面输入文件名),按回车即可找到。同样的,接下来需要往Y 负方向移,即左移,一边调整一边观察视图。

sinat_15677011的博客 3682

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

将base64格式的图片下载到本地

先将base64转为file,然后再利用a标签下载 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

吃瓜群众的博客 2万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

pc端 下载图片到本地 兼容IE

参考 纯javascript前端实现base64图片下载(兼容IE10+) 背景 管理后台PC端生成一个二维码,用户需要下载到本地打印出来,用于收费 思路 1、接口取到二维码(二维码图片最好是base64) 2、二维码嵌到页面上 3、clone一份html结构出来(正好是需要打印的部分) 4、clone的结构fixed脱离标准流,z-index值给小,起到不显示的作用 5、canvas画图 6、h...

siwangdexie_copy的博客 724

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

文件下载、图片下载

1.下载图片,响应的是base64编码,需要将base64转为图片,然后下载图片。1.GET请求,下载导出文件。2.在响应数据处,处理下载。1.使用a标签直接下载。

weixin_67274585的博客 1261

python兼容js base64_纯javascript前端实现base64图片下载(兼容IE10+)

背景在项目开发过程中,经常会有图片导出的需求,尤其是带有图表类的应用,通常需要将图表下载导出。在chrome等新版浏览器中实现base64图片的下载还是比较容易的:创建一个a标签将a标签的href属性赋值为图片的base64编码指定a标签的download属性,作为下载文件的名称触发a标签的点击事件但是这套逻辑在IE下是不行的,这样写会直接报错。所以IE下需要单独处理,这里IE在处理这种文件的时候...

weixin_39578899的博客 169

HTML+JS实现浏览器前端下载图片

最近做项目需要用到js图片下载,按照原先下载文件的思路,我感觉直接 window.open("下载链接"); 就可以了,但实际操作后,发现这个只会在新窗口打开图片,并不会触发下载,在网上找到大佬的解决,方法,特此记录下,能够兼容大部分浏览器,但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。 --------------------------------...

_修铁路的、的博客 8757

js实现图片下载

*不支持低版本的浏览器哦! 一:html代码 <img src="photo.jpg" id="pic1"/> <a href="javascript:;" target="_self" title="下载图片" class="down_btn">下载图片</a> 二:js代码 <script> (function(){ if( windo...

YouWong BLOG 355

JS 实现跨域外链下载图片(不支持IE)

跨域需要服务器设置 function ddd(){ // ES6 语法 let src = 'https://fenmul.github.io/Sin.gtihub.io/images/qrcode.bmp'; var canvas = document.createElement('canvas'); ...

码狐 2083

js前端文件下载

在HTML5中,download是便签的新增属性,download属性能让我们指定浏览器下载文件时的默认名称,将download属性添加到连接上,当我们点击这个链接,download属性值里的名称会显示到弹出的下载框里,而且download属性能够强制触发下载操作 具体介绍可参考:“了解HTML/HTML5中的download属性”。远程跨域的url地址点击进行下载 二、借助HTML5 Blob实现文本信息文件下载 原理其实很简单,我们可以将文本或者JS字符串信息借助Blob转换成二进制,然后,作为元素的

qq_24832277的博客 1335

js实现oss批量下载文件_JS实现下载远端图片到本地

背景公司静态资源存储采用的是阿里云的oss服务,会返回一个如下的静态资源链接:http://static.xxxxxxx.com/5b7fe45205691500062a1c59/3315E3869EFD673014AAB086D9C2CD9B?x-oss-process=image/format,jpg需要提供一个点击下载图片的按钮,如下图所示,点击可以下载该图片。 踩坑过程1、通过window...

weixin_42360722的博客 2321
上一篇: L2Dwidget 添加动漫人物,点击出现文字向上渐变隐藏,鼠标滑动出现气泡
下一篇: table 表格拖动改变列宽
haogemr
博客等级 码龄9年 71粉丝 87原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值