バックエンドは svg ファイル ストリームを返し、フロントエンドはそれを表示してダウンロードします

図に示すように、バックエンドから返される svg コンテンツは直接 xml ファイルです。
ここに画像の説明を挿入

表示とダウンロードにはフロントエンドが必要です。
ここに画像の説明を挿入
フロント エンドには 2 つの機能があります。1 つはプレビュー (ブラウザーで SVG を開く) で、もう 1 つはダウンロード (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)
 },

効果は次のとおりです。
ここに画像の説明を挿入

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/changyana/article/details/130333251