Como se muestra en la figura, el contenido svg devuelto por el backend es directamente un archivo xml.
Se requiere el front-end para mostrar y descargar.
La interfaz tiene dos funciones, una es la vista previa (abrir svg en el navegador) y la otra es descargar (descargar svg a local)
código de vista previa:
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)
},
¡Esto abrirá el svg en el navegador!
El efecto es como se muestra en la figura:
Código descargado:
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)
},
El efecto es el siguiente:
