Simple is Best

〜 志は高く、目標は低く 〜

React Component を画像に変換してダウンロードさせる


特定の Component を画像に変換してダウンロードする機能を実装したかったので探しました。html2canvas というライブラリを用いることで可能になります。

ライブラリをインストール

npm 派は

1
npm i html2canvas

Yarn 派は

1
yarn add html2canvas

私はまだ Yarn 派です。最近は npm も速いしスクリプトがあるし npx もあるしって感じで良さそうですよね。移行したいなと思いつつも手癖で yarn と打ってしまいます。

実装

ExportButton をクリックすると TargetComponent が PNG に変換されてダウンロードされる、とういうコードです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from "react";

import html2canvas from "html2canvas";

const TargetComponent = () => {
// 出力予定のコンポーネントに id を付けておく
return (
<div id='target-component'>
<h1>ここが画像になるよ!</h1>
</div>
);
}

// html2canvas で得られる URI を用いてダウンロードさせる関数
// Ref: https://stackoverflow.com/questions/31656689/how-to-save-img-to-users-local-computer-using-html2canvas
const saveAsImage = uri => {
const downloadLink = document.createElement("a");

if (typeof downloadLink.download === "string") {
downloadLink.href = uri;

// ファイル名
downloadLink.download = "component.png";

// Firefox では body の中にダウンロードリンクがないといけないので一時的に追加
document.body.appendChild(downloadLink);

// ダウンロードリンクが設定された a タグをクリック
downloadLink.click();

// Firefox 対策で追加したリンクを削除しておく
document.body.removeChild(downloadLink);
} else {
window.open(uri);
}
}

const onClickExport = () => {
// 画像に変換する component の id を指定
const target = document.getElementById("target-component");
html2canvas(target).then(canvas => {
const targetImgUri = canvas.toDataURL("img/png");
saveAsImage(targetImgUri);
});

const ExportButton () => <button onClick={() => onClickExport()}>PNG出力</button>

これでうまくいくはずです。このコードを利用したサービス があるので、動作を確認したい場合はそちらで確認してください。


URLをクリップボードにコピーしました。