学无先后,达者为师

网站首页 编程语言 正文

后端返回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

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新