用React hook將SVG圖檔儲存成PNG

這篇分享一下如何將React網頁上的SVG圖片儲存成PNG圖片，這裡因為使用react hook會不太知道該怎麼寫的部份，就是forwardRef該怎寫。

安裝套件

yarn add save-svg-as-png

引用套件

import { saveSvgAsPng } from 'save-svg-as-png';

在App.js中寫一個按鈕用來處理儲存，並用useRef接上SVG圖檔

function App() {

const refSvg = React.useRef(null);

const savePNG = () => {

saveSvgAsPng(refSvg.current, '圖檔.png', { scale: 2 });

};

return (

<>

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

<button onClick={savePNG}>下載png</button>

</>

);

在我們的SvgCanvas.js中則是加上React.forwardRef

const SvgCanvas = React.forwardRef((props, ref) => {

return (

<svg xmlns="http://www.w3.org/2000/svg" ref={ref}>

...

</svg>

);

});