svg-spreadsheet
Google Spreadsheetで作成した表をSVG画像化するツール
表を1個だけ書いたこのシートから
こういう画像を作れる
壊れてる... 2024/4/25
結合されたセルや背景色などのデザインも反映される
foreignObject要素に対応していないブラウザのためにPNG画像も生成できる
仕組み
Google Drive APIを用いてSpreadsheetをHTMLとしてエクスポート
mimeTypeに
application/zip を指定するshellcurl \
'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やりたい
いい感じにウェブサービス化できないか
Safariで表示崩れを起こすことがある問題
? (Spreadsheet|Googleスプレッドシート)で作った(テーブル|表)を[SVG]画像化するツール