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

最新推荐文章于 2025-02-22 11:49:37 发布

ChangYan.

最新推荐文章于 2025-02-22 11:49:37 发布

阅读量2.4k

点赞数 2

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/changyana/article/details/130333251

版权

前端专栏收录该内容

86 篇文章

订阅专栏

文章讲述了如何在前端对后端返回的SVGXML内容进行处理，实现预览（在浏览器中打开）和下载（保存为本地文件）的功能。使用Blob对象和createObjectURL方法，结合创建动态a标签来触发下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图，后端返回的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)
 },