svg-spreadsheet
https://github.com/daiiz/svg-spreadsheet
Google Spreadsheetで作成した表をSVG画像化するツール
表を1個だけ書いたこのシートから
こういう画像を作れる
https://apps.daiiz.dev/svgsp/usercontent/1WmwoZ0hMDfMvRdbUPHD7NKpz8JJBocy7pfhVWx3sov8/e-san.svg
壊れてる... 2024/4/25
結合されたセルや背景色などのデザインも反映される
foreignObject要素に対応していないブラウザのためにPNG画像も生成できる
仕組み
Google Drive APIを用いてSpreadsheetをHTMLとしてエクスポート
https://developers.google.com/drive/api/v3/reference/files/export
mimeTypeにapplication/zipを指定する
code:shell
curl \
'https://www.googleapis.com/drive/v3/files/SHEET_ID/export?mimeType=application%2Fzip&key=YOUR_API_KEY' \
--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
やりたい
いい感じにウェブサービス化できないか
svg-spreadsheet-serverでやる
Safariで表示崩れを起こすことがある問題
#作った
? (Spreadsheet|Googleスプレッドシート)で作った(テーブル|表)をSVG画像化するツール