3

我必须在 Dart 中使用一些 DOM 操作来处理 SVG 元素。在“svg”标签下添加和更改一些元素后，我想将最终的 SVG 元素导出到静态文件。有什么API可以做到吗？

谢谢！

4

2 回答 2

7

您可以在元素上使用该download属性。<a>这告诉浏览器下载资源而不是导航到它。

您可以使用innerHtml.

这是一个例子。

首先，HTML：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Svgtest</title>
    <link rel="stylesheet" href="svgtest.css">
  </head>
  <body>
    <h1>Svgtest</h1>

    <div id="container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="50" r="40" stroke="black"
        stroke-width="2" fill="red"/>
      </svg>
    </div>

    <script type="application/dart" src="svgtest.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

接下来是 Dart 代码：

import 'dart:html';

void main() {
  Element container = query('#container');
  String contents = container.innerHtml;

  Blob blob = new Blob([contents]);
  AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
  downloadLink.text = 'Download me';
  downloadLink.download = 'svg_contents.svg';

  Element body = query('body');
  body.append(downloadLink);
}

以下是浏览器覆盖范围：http ://caniuse.com/#feat=download 在撰写本文时，Firefox、Chrome 和 Opera 支持该download属性。

（注意：无法使用 HTML5 直接将文件保存到本机 OS 文件系统。）

于 2013-08-31T06:54:01.900 回答
1

对于 IE 10+： 

import 'dart:html';
import 'dart:js';
import "package:js/js.dart";

@JS("navigator.msSaveBlob")
external void msSaveBlob(blob, filename);    

void main() {
  Element container = query('#container');
  String contents = container.innerHtml;

  Blob blob = new Blob([contents]);
  if (js.context['navigator']['msSaveBlob'] != null) {
      msSaveBlob(blob, 'svg_contents.svg');
  } else { 
      AnchorElement downloadLink = new AnchorElement(href: Url.createObjectUrlFromBlob(blob));
      downloadLink.text = 'Download me';
      downloadLink.download = 'svg_contents.svg';
      Element body = query('body');
      body.append(downloadLink);
  }
}
于 2016-02-25T16:03:47.227 回答