ClipboardItem: ClipboardItem() コンストラクター

Baseline 2025

構文

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

引数

data

MIME タイプをキー、データを値とする Object です。データは次のいずれかで表すことができます。

Blob
文字列
Blob または文字列に解決する Promise

options 省略可

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

presentationStyle 省略可

unspecified、inline、attachment の 3 つの文字列のうちの 1 つ。デフォルト値は unspecified です。

inline は、貼り付けを受け取るアプリに対して、ClipboardItem を貼り付け位置にインラインで挿入すべきであることを示します。attachment は、貼り付けを受け取るアプリに対して、ClipboardItem を添付ファイルとして追加すべきであることを示します。unspecified は、貼り付けを受け取るアプリに対して何の情報も示しません。

例

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

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

async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/png")) {
      const imgURL = "/my-image.png";
      const data = await fetch(imgURL);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("読み込んだ画像をコピーしました。");
    } else {
      console.log("PNG 画像に対応していません");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}