我有一個代表力有向圖的 svg。我希望通過單擊鏈接下載此 svg 并將其保存為 svg 檔案。在嘗試了其他類似帖子的幾種解決方案后，我想出了這個函式，在單擊按鈕時將被呼叫：
<a id="svglink" href="" @click="saveSvg2" download="testSvg.svg" >DOWNLOAD</a>
saveSvg2(){
// https://askcodez.com/comment-puis-je-enregistrer-exporter-un-fichier-svg-apres-la-creation-dun-svg-avec-d3-js-ie-safari-et-chrome.html
//get svg element.
var svg = document.getElementById("graph").child; // this.exportableMap
//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);
//add name spaces.
if(!source.match(/^<svg[^>] xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)){
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>] "http:\/\/www\.w3\.org\/1999\/xlink"/)){
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
//add xml declaration
source = '<?xml version="1.0" standalone="no"?>\r\n' source;
//convert svg source to URI data scheme.
var url = "data:image/svg xml;charset=utf-8," encodeURIComponent(source);
//set url value to a element's href attribute.
document.getElementById("svglink").href = url;
},
如果我使用一個按鈕并右鍵單擊該按鈕并從那里保存它，它會起作用，但我希望它在左鍵單擊時下載并使用預定義的檔案名。理想情況下，通過左鍵單擊一個鏈接，但如果更容易實作，一個按鈕也可以作業我怎樣才能做到這一點？
uj5u.com熱心網友回復：
確保您從 Web 服務器運行它。我使用 blob 方案，但我想資料方案是一樣的。下面的示例無法在 ST 片段中運行，因此我制作了一個codepen 示例。當您第一次單擊鏈接后檢查鏈接時，您可以看到 href 具有 value blob:https://cdpn.io/[some id]。URL 表明它應該可以作業。如果頁面不是從服務器運行的，則 href 的值將類似于 blob:null/[some id].
我知道我跳過了你的一些代碼，但這是一個關于如何使用Blob將標記（如 SVG 字串）轉換為資料 URL 的最小示例。
document.links.svglink.addEventListener('click', e => {
let svg = document.querySelector('svg').outerHTML;
let blob = new Blob([svg], {type : 'image/svg xml'});
e.target.href = URL.createObjectURL(blob);
});
<svg viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="orange" />
</svg>
<a name="svglink" href="javascript:void(0)" download="hello.svg">DOWNLOAD</a>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459436.html
標籤：javascript svg