скачать файл svg из DOM или из элемента Object - PullRequest
Новая
       38

скачать файл svg из DOM или из элемента Object

0 голосов
/ 01 мая 2019

Я хочу скачать / сохранить .svg из DOM.Я встроил свой SVG-файл в элемент Object и динамически обновлял некоторые элементы в SVG и стилизовал его в своем приложении Angular 7.

<object id="svg1" data="assets/10026_019.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>
     <button (click)="downloadSVG()">Download SVG file</button>

После обновления SVG мне нужно скачать / сохранить всю svg contnet в файле .svg.или любые другие альтернативные опции, доступные для загрузки обновленного файла SVG?

1 Ответ

0 голосов
/ 21 мая 2019

Я сделал сам, но не уверен, что это правильный подход. Ниже код работает нормально. Я установил пакет сохранения файлов из npm 

npm install file-saver ngx-filesaver --save

В app.module.ts мы должны импортировать и добавить его в массив импорта 

import { FileSaverModule } from 'ngx-filesaver';
imports: [  
    FileSaverModule
  ]

и затем в машинописном тексте мы должны импортировать файлы, как показано ниже 

import { FileSaverService } from "ngx-filesaver";

из конструктора мы должны инициализировать сервис 

 constructor(private fileSaverService: FileSaverService){}

, а затем загрузить функцию 

downloadSvg(){    
    let obj:any=document.getElementById('svg1');
    let svgBody:any=obj.contentDocument.querySelector("svg").innerHTML;
    let svgContent="<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"4239.54 906.94 3137 1984\">"+svgBody+"</svg>";
    let blob=new Blob([svgContent]);    
    this.fileSaverService.save(this.blob,'filename.svg');

  }
...