ClipboardItem()

Baseline 2025

Newly available

Since February 2025, 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 インターフェイスについては、ブラウザーの互換性一覧表を参照してください。

構文

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

引数

data

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

options 省略可

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

presentationStyle 省略可: unspecified、inline、attachment の 3 つの文字列のうちの 1 つ。既定値は unspecified。

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

例

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

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

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);
  }
}