網站首頁 編程語言 正文
如圖,后端返回的svg內容直接是一個xml文件。
需要前端進行展示并下載。
前端有兩個功能,一個是預覽(在瀏覽器中打開svg),一個是下載(將svg下載到本地)
預覽的代碼:
this.showDataByBlob(data, { type: 'image/svg+xml' }) // data里就是我上邊截圖的xml內容
showDataByBlob(data, options) {
const blob = new Blob([data], options)
const href = window.URL.createObjectURL(blob)
window.open(href)
},
這樣就能將svg在瀏覽器中打開啦!
效果如圖:
下載的代碼:
this.exportDataByBlob(data, { type: 'image/svg+xml' }, 'test.svg')
exportDataByBlob(data, options, fileName) {
const blob = new Blob([data], options)
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = fileName
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
},
效果如下:
原文鏈接:https://blog.csdn.net/changyana/article/details/130333251
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2024-01-27 什么是消息隊列
- 2022-05-25 Flutter實現掃二維碼功能_Android
- 2023-06-05 Python?socket之TCP通信及下載文件的實現_python
- 2022-04-11 SQL?Server的觸發器你了解多少_MsSql
- 2023-06-21 Python生成元組和字典的方法_python
- 2023-07-05 Spring aop+自定義注解實現接口返回數據過濾
- 2022-08-17 VMWare虛擬機為Windows?Server?2008設置靜態IP的方法_VMware
- 2022-04-18 C#線程中彈窗的制作方法_C#教程
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支