ClipboardItem()
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