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 省略可

unspecified、inline、attachment の 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

関連情報