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
インターフェイスについては、ブラウザーの互換性一覧表を参照してください。
構文
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);
}
}
仕様書
Specification |
---|
Clipboard API and events # dom-clipboarditem-clipboarditem |
ブラウザーの互換性
BCD tables only load in the browser