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

Demo2Reward:用人类演示动态优化VLM奖励模型提示

多模态大模型(VLM)的奖励建模正面临核心瓶颈——静态提示导致语义鸿沟与泛化失效。其本质是将人类判断标准固化为不可更新的文本模板,使奖励信号脱离真实任务意图。Demo2Reward提出范式级改进:以结构化人类演示为元信号,驱动提示权重连续优化,实现从‘结果打分’到‘过程理解’的跃迁。该方法不修改VLM主干,却显著提升RLHF收敛效率与OOD鲁棒性,在医疗、工业质检等场景验证了跨任务迁移与热修复能力。它重新定义了提示工程的技术价值:不是前端微调,而是奖励系统的认知校准基础设施。

weixin_34302798的博客 408

TLSv1.0与TLSv1.1安全漏洞深度解析与实战修复指南

本文深度解析TLSv1.0与TLSv1.1的安全漏洞,包括POODLE和BEAST攻击原理,并提供实战修复指南。通过禁用老旧协议、配置安全加密套件和网络层防护措施,有效提升系统安全性。文章还针对无法立即升级的场景,给出了补偿性防御方案,帮助管理员全面应对传输层安全风险。

weixin_29322855的博客 206

js下载base64格式的图片

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

资深php_web工程师 810

电信光猫隐藏的VOIP功能揭秘:不用座机也能打电话(EasySip实战)

本文揭秘了电信光猫隐藏的VOIP功能,通过EasySip实战演示如何无需座机实现高清通话。详细解析了光猫的SIP协议支持、语音VLAN配置及网络架构优化,帮助用户利用现有设备提升通话质量并扩展设备兼容性,特别适合智能家居和企业级应用场景。

weixin_29268385的博客 760

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

HMC5883L磁力计在STM32F4上的I2C驱动与数据校准实战

本文详细介绍了HMC5883L磁力计在STM32F4平台上的I2C驱动开发与数据校准实战。通过解析寄存器配置、数据读取处理和椭圆拟合校准算法,帮助开发者实现精准的地磁测量,特别适用于无人机导航和机器人系统中的航向确定与陀螺仪漂移修正。

2y3u4i5o6p的博客 1037

OpenHarness代码解读

Harness 是包裹在大模型之外、为其赋予完整执行能力的全套基础设施。模型负责提供智能与推理,Harness 则为模型提供感知、行动、记忆、工具与安全约束,使其从语言模型变成可自主完成复杂任务的实用智能体。我这里把向量数据库方案定义为:把对话片段、事件、偏好、工具结果等切成 memory chunks,做 embedding,存进向量库,查询时靠 ANN 相似度召回,再交给 LLM 读。AAAI 的综述类论文就明确指出,很多 LLM agent 的长期记忆就是这么做的。AAAI 期刊把文件系统方案。

qq_52053775的博客 188

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

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

weixin_30505485的博客 1419

C++11、C++14 和 C++17 标准新特性详解

特性C++11C++14C++17auto类型推导✅范围 for 循环✅Lambda 表达式✅✅✅智能指针✅移动语义✅nullptr✅统一初始化{}✅✅constexpr✅✅✅✅数字分隔符✅结构化绑定✅✅✅文件系统库✅。

h a 6 6 6 c k 为 你解决复杂难题! 440

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

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

laizhenghua的博客 6093

Allegro层叠中的介电常数如何填写指导说明

在用Allegro进行PCB设计的时候,需要在cross-section中设置好每个层的信息,包括层命名,每层的厚度等等信息。但是对于有仿真需求或者等长设计需要使用ps作为延时单位的设计的时候,需要额外在层叠中填写介电常数的值,如下图。按照经验值填写为2.8,因为外层和平面层不会被树脂填充,铜皮层还是完整的铜皮,如下图。对应层叠将每层介质的介电常数的数值填入到PCB中去,油墨的介电常数填4。层叠中只给出了每个介质的介电常数,铜皮的介电常数却没有给出。所以正确填写介电常数的结果如下图。需要按照下面的规则来。

weixin_54787054的博客 1392

QML从入门到实战 - 完整学习路线

想入门 QML 开发?来 “从零开始学 QML” 专栏,海量源码 + 实战案例 + 大型项目拆解,手把手教你搞定跨平台 UI 设计,小白也能轻松掌握!

BenBierBa的博客 3479

将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万+

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

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

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

siwangdexie_copy的博客 724

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

文件下载、图片下载

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、付费专栏及课程。

余额充值