首页 > 其他分享 >使用js下载svg图片

使用js下载svg图片

时间:2023-10-30 14:36:08浏览次数:31  
标签:const url svg js link file document 下载

              //获取svg
              let dom = document.querySelector('.currentSvg')
              // 将 SVG 节点转换为 XML 字符串
              const svgString = new XMLSerializer().serializeToString(dom)

              // 下载 SVG 文件
              const file = new Blob([svgString], { type: 'image/svg+xml' })
              const url = URL.createObjectURL(file)
              console.log('file', file)
              console.log('url', url)
              const link = document.createElement('a')
              link.href = url
              link.download = 'my-svg-file.svg'
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              URL.revokeObjectURL(url)

标签:const,url,svg,js,link,file,document,下载
From: https://www.cnblogs.com/HatcherBlogs/p/17797776.html

相关文章

  • 使用Python获取建筑网站数据,进行可视化分析,并实现网站JS解密!
    哈喽兄弟们,今天来实现一下建筑市场公共服务平台的数据采集,顺便实现一下网站的JS解密。话不多说,我们直接开始今天的内容。 首先我们需要准备这些环境使用Python3.8Pycharm模块使用requests-->pipinstallrequestsexecjs-->pipinstallPyExecJ......
  • 直播app源码,js图片下载方式集合
    直播app源码,js图片下载方式集合一、文件流格式下载创建a标签下载文件流格式图片 /** *创建<a>标签下载文件流格式图片 *@paramfile  *@paramfileName  */exportconstdownloadFile=(file:string,fileName?:string)=>{ constblob=newBlob([file]......
  • 使用react-native-drawer,跟着官网配置仍报错,Error: [Reanimated] `valueUnpacker` is
    在使用react-native-drawer组件时,编译项目报错试了许多的方法,最后通过在一篇博客中找到解决方法https://blog.csdn.net/lxyoucan/article/details/121851577因为在使用react-native-drawer时也需要使用react-native-reanimated,需要在babel.config.js增加如下第三行配置,然后重新......
  • binutils 2.40 Linker (ld) 官方文档下载
    前言最近需要熟悉elf与共享库的链接与加载流程,需要先了解elf文件是怎么链接的,链接脚本如何阅读最有效的方式是查看GNU官方的Linker(ld)文档,通过查找,这个Linker(ld)属于GNUbinutils,当前的较新的版本为:2.40binutilsLinker(ld)文档文档地址:https://sourceware.o......
  • JS动态在父元素里追加元素——insertAdjacentHTML
    insertAdjacentHTML() 方法将指定的文本解析为 Element 元素,并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快。 element.insertAdjacentHTML(position,......
  • 智慧城市总体规划方案:PPT全文43页,附下载​
    关键词:智慧城市建设方案,智慧城市规划,智慧城市发展前景与趋势,智慧城市管理平台,智慧城市建设,新型城镇化建设,城市数字化转型。一、传统模式城市的落后之处1、城市规划和设计传统城市往往因为过度成熟而陷入滞涨,老城区的房子楼龄过大,设计落后且没有优质学区。这导致其金融属性和居住属......
  • 5G+AIOT智慧社区综合建设方案:PPT全文47页,附下载​
    关键词:智慧社区解决方案,智慧社区管理系统平台,智慧社区建设方案,智慧社区一体化管理平台一、智慧社区建设背景随着社会的进步与发展,城镇化是整个社会必然的进化过程,从人类的诞生到城市的建立,整个社会经历了从乡村到城市的发展,最近几十年城镇化得到快速发展,世界城市化率由1970年的36.5......
  • Kaldi安装过程中遇到cub-1.8.0.tar.gz、sctk-20159b5.tar.gz、openfst-1.7.2.tar.gz三
    Kaldi安装过程中遇到cub-1.8.0.tar.gz、sctk-20159b5.tar.gz、openfst-1.7.2.tar.gz三个包下载不全产生报错的状况。从官网下载三个包,然后上传到Linux服务器kaldi/tools目录下,再运行Makefile即可。以下是三个包的下载链接cub-1.8.0.tar.gz下载链接:https://pan.baidu.com/s/1jX......
  • JS点击空白关闭弹窗的方式
    12$(document).mouseup(function(e){3varpop=$('popDialog');4if(!pop.is(e.target)&&pop.has(e.target).length===0){5//可以在这里关闭弹窗6somecode...7}8});9判断点击事件发生在区域外的两个条件:点......
  • Python中的JSON数据解析和映射--根据value查询key
    importjson#原始JSON数据json_data='''[{"id":1,"name":"MOVE"},{"id":2,"name":"LEFT_DOWN"},{"id":3,"name":"LEFT_UP"},{......