日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

后端返回svg文件流前端展示并下載

作者:ChangYan. 更新時間: 2023-07-08 編程語言

如圖,后端返回的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

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新