时间戳

首页 > 解决方案 > 从 DOM 或 Object 元素下载 svg 文件

typescript - 从 DOM 或 Object 元素下载 svg 文件

问题描述

我想从 DOM 下载/保存 .svg。我已将我的 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 文件中下载/保存整个 svg contnet。或任何其他替代选项可用于下载更新的 svg 文件？

标签： typescriptsvgangular7svgpanzoom

解决方案

我自己做过，但不确定这是否是正确的方法。下面的代码工作正常。我已经从 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="&lt;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');

  }

推荐阅读