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