js下载base64格式的图片

2023-10-27

步骤:
1)创建一个a标签
2)给a标签创建点击事件
3)将base64数据转为Blob类型
4)将a标签的href指向Blob类型数据
5)触发a标签

代码:

template:

vue-qr 组件可以自动将 :text绑定的url地址转换为二维码,callback第一个参数可以获取到二维码的base64格式的数据。

base64数据样例:

data:image/png;base64,iVBORw0KeeAACH930BWkAEcECBkwEeQJaSfAwKE9H8DWUEGcECAkAEfQZaQfg4IENL/DWQFGcABAUIGfARZQvo5IEBI/zeQFWQABwQIGfARZAnp54AAIf3fQFaQARwQIGTAR5AlpJ8DAoT0fwNZQQZwQICQAR9BlpB+DvwfOwko13oUWwAAAAAASUVORK5CYII..........=
<div>
          <vue-qr v-if="link" :size="194" :callback="getImageData" :text="link"    />
 </div>                               
                        
                   

js代码:

downloadFile(fileName, content) {
            let aLink = document.createElement('a')
            let blob = this.base64ToBlob(content) // new Blob([content]);
            let evt = document.createEvent('HTMLEvents')
            evt.initEvent('click', true, true)// initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
            aLink.download = fileName
            aLink.href = URL.createObjectURL(blob)
            // aLink.dispatchEvent(evt);
            aLink.click()
        },
        // base64转blob
        base64ToBlob(code) {
            let parts = code.split(';base64,')
            let contentType = parts[0].split(':')[1]
            let raw = window.atob(parts[1]) // 解码base64得到二进制字符串
            let rawLength = raw.length
            let uInt8Array = new Uint8Array(rawLength) // 创建8位无符号整数值的类型化数组
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i) // 数组接收二进制字符串
            }
            return new Blob([uInt8Array], {type: contentType})
        },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js下载base64格式的图片 的相关文章

  • 在 ajax 完成之前阻止提交

    我正在使用 jQuery 并且我希望在所有 ajax 调用完成之前表单提交不会起作用 我想到的一种方法是存储一个布尔值 该值指示是否有 ajax 请求正在进行 在每一个结束时它都会被设置为 false 我不确定这是否是最好的方法 所以我将不
  • 在 Web 浏览器中查找触发 then 事件的 jQuery 代码

    我加入了一个团队来从事一个项目 现在他们使用 jQuery 并且很多 javascript 文件都是外部文件而不是嵌入的 当我点击一个按钮时 它看起来就像 a class button cancel Cancel a 它触发一个在一个 ja
  • ReferenceError:找不到变量:需要

    我在加载时遇到问题node modules到我的网页之一 我已经安装了 npm node js 并且我想使用require 函数在我的网站上初始化 Firebase 我不知道为什么 但它抛出引用错误 ReferenceError 找不到变量
  • 我可以从 HTTP 请求中找到无线接入点的 BSSID(MAC 地址)吗?

    假设有人在咖啡店里无线连接到互联网 并向 johnsveryownserver com 发送 HTTP 请求 服务器端 有什么方法可以确定我的MAC地址吗 无线接入点他们连接到什么 请注意 我对他们机器的 MAC 地址不感兴趣 如果我无法使
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 将音频与视频流合并 Node.js

    我正在创建 YouTube 视频下载器并且正在使用ytdl core库 它无法下载带有音频的高质量视频 因为 youtube 将其放在另一个文件中 但我需要将其全部下载到一个文件中 我已经这样做了 app get download asyn
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 创建 Cookie 时需要帮助

    我有一个名为yes和另一个名叫no
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 访问 TypeScript 数组的最后一个元素

    TypeScript 中有访问数组最后一个元素的符号吗 在 Ruby 中我可以说 array 1 有类似的东西吗 您可以通过索引访问数组元素 数组中最后一个元素的索引将是数组的长度 1 因为索引是从零开始的 这应该有效 var items
  • jQuery 选择器:为什么 $("#id").find("p") 比 $("#id p") 更快

    该页面的作者 http 24ways org 2011 your jquery now with less suck http 24ways org 2011 your jquery now with less suck断言 jQuery
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • Jquery,清除/清空 tbody 元素的所有内容?

    我认为这会相当简单 但似乎空方法无法清除我拥有的 tbody 如果有人知道执行此操作的正确方法 我将不胜感激 我只想删除 tbody 中包含的所有内容 到目前为止我正在尝试 tbodyid empty HTML table tbody tr
  • 在javascript中动态生成行?

    我是 javascript 新手 我想在按下 Tab 时动态生成行 并希望获取在动态生成的行中输入的值 以便我可以在 servlet 代码中使用这些值 这是我的html
  • 如何更改订阅值?使用 rxJS

    我正在创建一个计时器 需要你的帮助 我刚刚学习 Angular 和 rxJS 对此我有一些疑问 我正在创建一个具有启动 停止 暂停 重置功能的计时器 并且 btn Reset 必须将我的计时器 暂停 到 300 毫秒 怎么做 D 我的启动定
  • 如何调试 Gulp 任务?

    如何调试我的中定义的 gulp 任务gulpfile js使用诸如 Google Chrome 调试器之类的调试器逐行单步执行任务的代码 对于 Node js 6 3 版本 您可以使用 inspect flag https nodejs o

随机推荐

  • java实现电子发票中的发票税号等信息识别的几种可用方案

    先说一下背景 今天领导突然说需要做一个电子发票中发票税号的识别 于是乎就开始去调研看有哪些方案 最先想到的就是OCR文字识别 自己去画框训练模型去识别税号等相关信息 话不多说开整思路 思路一 百度AI平台去直接调用 思路二 自己基于模型训练
  • Ubuntu /Window下 X2Go 安装&连接&同步/上传文件夹:复制、粘贴、桌面共享

    Ubuntu Window下X2Go安装 连接 同步 上传文件夹 一次性成功 X2Go 的优点 双向粘贴板 安装 就可使用 文件夹共享 在某些 linux发行版上 由于依赖包问题 解决起来麻烦 在 错误新题提示 在服务器端 为隐藏文件 在客
  • C语言中,变量的按作用域角度分类的几种情况

    c语言中 变量按作用域角度分 分为局部变量和全局变量 1 局部变量是在一个函数内部或一个代码块中定义的变量 只能在被函数和代码块范围内有效 如 void test int b 20 b是一个局部变量 在test函数内有效 int main
  • OSPF实验报告

    一 划分网段 将192 168 1 0 24划分为 192 168 1 0 26 192 168 1 128 26 192 168 1 64 26 192 168 1 192 26 二 添加ip地址 将192 168 1 0 26划分为网络
  • 蓝桥杯 调手表【第九届】【决赛】【B组】

    比较简单的题 看到网上题解基本都是bfs解法 发个贪心解法记录一下 include
  • VSCode格式化XML

    VSCode格式化XML 文章目录 VSCode格式化XML 1 结果展示 2 插件 notepad 自带的xml插件不是很好用 显示xml树的插件经常失灵 尝试在VSCode上找到了一些插件 很好的解决了XML的格式化和XML节点显示的问
  • 【华为OD机试真题 Python】数组二叉树

    前言 本专栏将持续更新华为OD机试题目 并进行详细的分析与解答 包含完整的代码实现 希望可以帮助到正在努力的你 关于OD机试流程 面经 面试指导等 如有任何疑问 欢迎联系我 wechat steven moda email nansun09
  • HashMap底层原理分析(结合面试问题分析)

    1 为什么HashMap底层数组的容量总是2的幂次方 答 因为hashmap的底层在计算一个entry存放在数组中的索引值的时候 采用哈希值运算 如果经过哈希算法得到的一个哈希值h的后面的二进制表示为 0101 0101 此时的数组的长度l
  • 软件构造总结笔记

    软件构造总结笔记 本笔记依据考试大纲 调整课堂讲义的分点 以知识点分化作为条理 精简原本人课堂笔记 进行总结 GitHub仓库资源 gzn00417 2020Spring Software Construction 文章目录 软件构造总结笔
  • 记一次某src得子域名接管漏洞挖掘

    如下案例是fofa找的 在火线资产里直接搜索关键词html noSuchbucket 可以看到显示如下信息
  • 无损剪切音视频文件的跨平台工具: LosslessCut

    mifi lossless cut Stars 17 3k License GPL 2 0 LosslessCut是一款跨平台的FFmpeg GUI工具 它可以对视频 音频和字幕等相关媒体文件进行快速无损操作 该软件最主要的功能是无损剪切和
  • 初识网络原理

    确定不来看看新出炉的知识 目录 1 网络互连 1 1局域网 1 2广域网 2 网络通信基础 2 1IP地址 2 2端口号 3 认识协议 3 1五元组 3 2协议分层 3 3OSI 7层模型 3 4TCP IP5层 或5层 模型 3 5网络设
  • 请求参数默认值多种实现方式

    文章目录 1 直接赋值 2 使用切面实现默认值 自定义注解 切面类 控制层使用 效果展示 3 使用过滤器Filter实现 自定义请求体 自定义过滤器 1 直接赋值 当前页码 private int pageNum 1 每页条数 privat
  • idea快速清理无效类文件

    1 右击选中的项目 如下图所示 2 在弹出框中输入 unused declaration点击选择 如下图所示 3 弹出如下图所示 点击ok 此时需要一段时间 4 结果如下图所示 5 此时 一个个选中 然后双击 有4种处理模式 如下图所示 S
  • 基于Distflow的最优潮流模型(OPF)--模型推导篇

    开篇 前言 自打上期内容火电机组经济调度建模及求解 基础篇推出以后 有小伙伴留言 不考虑潮流问题的经济调度都是耍流氓 作为一个有文化的流氓 我们尝试着为大家科普潮流计算 对于电力系统而言 潮流计算是一个非常复杂且重要内容 如果我们推文中有什
  • 俞敏洪:与其有钱,不如值钱

    很多人一辈子有两个追求 一个是有钱 一个是值钱 有的人运气好 出生在富贵之家 一出生就像贾宝玉一样嘴里含着玉 有钱就不是问题 但有钱解决不了第二个问题 也就是你本人值不值钱的问题 值钱是个人价值的体现 比如你去找一份工作 人家给你开出百万年
  • 链表 List.h

    链表 List h include list h include
  • Android指纹门锁ESP32项目

    本教程中我向您展示如何使用指纹扫描仪Android手机通过ESP32或ESP8266 Wifi或Arduino wifi模块进行门解锁 要创建此项目 您需要ESP32 中继模块 电磁门锁和Android手机 所需零件 源代码 详情参阅 亚图
  • layUI 使用select选择框无法显示出样式,看不到、等解决方案

    我们在写layui代码时候可能遇到这样的问题 明明代码都是从layui官网上复制下来的 却还是会看不到相应的元素 就比如我昨天遇到的一个BUG 代码如上 但是页面上却没有显示出选择框 选择框这里却依然没有结果出现 这个问题困扰了我几个小时
  • js下载base64格式的图片

    步骤 1 创建一个a标签 2 给a标签创建点击事件 3 将base64数据转为Blob类型 4 将a标签的href指向Blob类型数据 5 触发a标签 代码 template vue qr 组件可以自动将 text绑定的url地址转换为二维