ClipboardItem()

ClipboardItem()クリップボード API のコンストラクターで、新しい ClipboardItem オブジェクトを生成します。これは、クリップボード API で保存・取得するデータを表し、それぞれ clipboard.write()clipboard.read() で操作します。

メモ: 画像形式の対応はブラウザーによって異なります。 Clipboard インターフェイスについては、ブラウザーの互換性一覧表を参照してください。

構文

js
new ClipboardItem(data);
new ClipboardItem(data, options);

引数

data

MIME タイプをキー、データを値とする Object です。データは Blob、文字列、または blob か文字列に解決する Promise として表現することが可能です。

options 省略可

以下のプロパティを持つオブジェクトです。

presentationStyle 省略可

unspecifiedinlineattachment の 3 つの文字列のうちの 1 つ。既定値は unspecified

メモ: また、 Clipboard インターフェイスの Clipboard.readText() メソッドと Clipboard.writeText() メソッドにより、テキストを扱うことができます。

以下の例では、 Fetch API を使って PNG 画像をリクエストし、 responses' blob() メソッドを用いて新しい ClipboardItem を生成しています。このアイテムは、 Clipboard.write() メソッドを用いて、クリップボードに書き込まれます。

メモ: 一度に渡すことができるクリップボードの項目は 1 つだけです。

js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}

仕様書

Specification
Clipboard API and events
# dom-clipboarditem-clipboarditem

ブラウザーの互換性

BCD tables only load in the browser

関連情報