kintone のグラフを画像としてダウンロード

はじめに

kintone のグラフを画像としてダウンロード、クリップボードにコピーするブックマークレットを紹介します。

できること

kintone アプリのグラフ表示画面を開いてブックマークレットを実行するとダウンロード用とコピー用のリンクを表示します。クリックでそれぞれの処理を実行します。

ブックマークレットの作成

ブックマークレット化の手順は次のページを参考にしてください。

コード

(async () => {
  const getDatetime = () => {
    const date = new Date();
    const YYYY = date.getFullYear();
    const MM = (date.getMonth() + 1).toString().padStart(2, "0");
    const DD = date.getDate().toString().padStart(2, "0");
    const HH = date.getHours().toString().padStart(2, "0");
    const mm = date.getMinutes().toString().padStart(2, "0");
    const ss = date.getSeconds().toString().padStart(2, "0");

    return `${YYYY}-${MM}-${DD}_${HH}-${mm}-${ss}`;
  };

  const loadImage = (image, src) =>
    new Promise((resolve) => {
      image.onload = () => resolve();
      image.src = src;
    });

  const svg = document.querySelector("#chart-container-gaia svg");
  const svgString = new XMLSerializer().serializeToString(svg);
  const imgSrc = `data:image/svg+xml;charset=utf-8;base64,${btoa(
    unescape(encodeURIComponent(svgString))
  )}`;

  const canvas = document.createElement("canvas");
  canvas.width = svg.width.baseVal.value;
  canvas.height = svg.height.baseVal.value;

  const img = new Image();
  await loadImage(img, imgSrc);

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  const div = document.createElement("div");
  div.style.backgroundColor = "white";
  div.style.textAlign = "center";

  const downloadLink = document.createElement("a");
  downloadLink.appendChild(document.createTextNode("[ DOWNLOAD ]"));
  downloadLink.href = canvas.toDataURL("image/png");
  const filename = `${kintone.app.getId()}-${getDatetime()}.png`;
  downloadLink.setAttribute("download", filename);

  const clipboardCopy = document.createElement("a");
  clipboardCopy.appendChild(document.createTextNode("[ COPY to CLIPBOARD ]"));
  clipboardCopy.onclick = async () => {
    const blob = await new Promise((resolve) => canvas.toBlob(resolve));
    await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
  };

  div.appendChild(downloadLink);
  div.appendChild(clipboardCopy);

  svg.parentNode.insertBefore(div, svg);
})();

面倒な人用

ブックマークレットの作成が面倒な人は「　グラフのダウンロード　」をブックマックバーにドラッグ・アンド・ドロップしてください。