ClipboardItem()

Baseline 2024

Newly available

Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

関連情報