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