From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/clipboarditem/index.html | 139 +++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 files/zh-cn/web/api/clipboarditem/index.html (limited to 'files/zh-cn/web/api/clipboarditem') diff --git a/files/zh-cn/web/api/clipboarditem/index.html b/files/zh-cn/web/api/clipboarditem/index.html new file mode 100644 index 0000000000..54979c2fdc --- /dev/null +++ b/files/zh-cn/web/api/clipboarditem/index.html @@ -0,0 +1,139 @@ +--- +title: ClipboardItem +slug: Web/API/ClipboardItem +tags: + - API + - Clipboard + - Clipboard API + - ClipboardItem + - Cut + - Interface + - NeedsTranslation + - Reference + - TopicStub + - copy + - paste +translation_of: Web/API/ClipboardItem +--- +
{{draft}}{{DefaultAPISidebar("Clipboard API")}}
+ +

The ClipboardItem interface of the {{domxref('Clipboard API')}} represents a single item format, used when reading or writing data via the {{domxref('Clipboard API')}}. That is {{domxref("clipboard.read()")}} and {{domxref("clipboard.write()")}} respectively.

+ +

The benefit of having the ClipboardItem interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.

+ +

Access to the contents of the clipboard is gated behind the Permissions API: The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

+ +
+

Note: To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface.

+
+ +
+

Note: You can only pass in one clipboard item at a time.

+
+ +

Constructor

+ +
+
{{domxref("ClipboardItem.ClipboardItem()")}}
+
Creates a new ClipboardItem object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value
+
+ +

Properties

+ +

This interface provides the following properties.

+ +
+
{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}
+
Returns an {{jsxref("Array")}} of MIME types available within the ClipboardItem.
+
+ +

Methods

+ +

This interface defines the following methods.

+ +
+
{{domxref("ClipboardItem.getType", "getType()")}}
+
Returns a {{jsxref("Promise")}} that resolves with a {{domxref("Blob")}} of the requested {{Glossary("MIME type")}}, or an error if the MIME type is not found.
+
+ +

Examples

+ +

Writing To Clipboard

+ +

Here we're writing a new {{domxref("ClipboardItem.ClipboardItem()")}} to the {{domxref("Clipboard API", "clipboard")}} by requesting a png image using the {{domxref("Fetch API")}}, and in turn, the {{domxref("Body.blob()", "responses' blob()")}} method, to create the new {{domxref("ClipboardItem")}}.

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

Reading From The Clipboard

+ +

Here we're returning all items on the clipboard via the {{domxref("clipboard.read()")}} method. Then utilizing the {{domxref("ClipboardItem.types")}} property to set the {{domxref("ClipboardItem.getType", "getType()")}} argument and return the corresponding blob object.

+ +
async function getClipboardContents() {
+  try {
+    const clipboardItems = await navigator.clipboard.read();
+
+    for (const clipboardItem of clipboardItems) {
+
+      for (const type of clipboardItem.types) {
+        const blob = await clipboardItem.getType(type);
+        // we can now use blob here
+      }
+
+    }
+
+  } catch (err) {
+    console.error(err.name, err.message);
+  }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}{{Spec2('Clipboard API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ClipboardItem")}}

+ +
+

Note: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.

+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf