展示React如何提供用戶下載畫面中的SVG圖檔

這篇展示React如何提供用戶下載畫面中的SVG圖檔，作法是參考這篇stackoverflow的答案，稍微修改後，可適用於React hook寫法。

function App() {

const refSvg = useRef(null);

const [downloadUrl, setUrl] = React.useState(null);

const generateSVGurl = () => {

const serializer = new XMLSerializer();

let source = serializer.serializeToString(refSvg.current);

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"');

}

source = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r\n${source}`;

const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });

setUrl(URL.createObjectURL(blob));

};

return (

<div className="App">

<button onClick={generateSVGurl}>下載svg</button>

{downloadUrl && <a href={downloadUrl} download="圖檔.svg">下載連結</a>}

<SvgCanvas ref={refSvg}></SvgCanvas>

</div>

);

};