svg-spreadsheet

Google Spreadsheetで作成した表をSVG画像化するツール

表を1個だけ書いたこのシートから

こういう画像を作れる

https://apps.daiiz.dev/svgsp/usercontent/1WmwoZ0hMDfMvRdbUPHD7NKpz8JJBocy7pfhVWx3sov8/e-san.svg

結合されたセルや背景色などのデザインも反映される

foreignObject要素に対応していないブラウザのためにPNG画像も生成できる

仕組み

Google Drive APIを用いてSpreadsheetをHTMLとしてエクスポート

mimeTypeにapplication/zipを指定する

code:shell

curl \

--header 'Accept: application/json' \

--compressed \

--output raw.zip

解凍すると、いくつかのSHEET_NAME.htmlとCSSファイルが得られる

外部CSSをインラインに展開

同時に不要なスタイル情報を削除する

HTMLテキストをパースしてtable要素を取り出す

SVGのforeignObject要素内にstyleとtableを記述

実行方法

$ node src/index.js SHEET_ID SHEET_NAME

やりたい

いい感じにウェブサービス化できないか

Safariで表示崩れを起こすことがある問題

? (Spreadsheet|Googleスプレッドシート)で作った(テーブル|表)をSVG画像化するツール