initial commit

1 files changed, 139 insertions, 0 deletions

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
+---
+<div>{{draft}}{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<p class="summary"><span class="seoSummary">The <strong><code>ClipboardItem</code></strong> 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.</span></p>
+
+<p>The benefit of having the <strong><code>ClipboardItem</code></strong> interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily.</p>
+
+<p>Access to the contents of the clipboard is gated behind the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>: The <code>clipboard-write</code> permission is granted automatically to pages when they are in the active tab. The <code>clipboard-read</code> permission must be requested, which you can do by trying to read data from the clipboard.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To work with text see the {{domxref("Clipboard.readText()")}} and {{domxref("Clipboard.writeText()")}} methods of the {{domxref("Clipboard")}} interface.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can only pass in one clipboard item at a time.</p>
+</div>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardItem.ClipboardItem()")}}</dt>
+ <dd>Creates a new <strong><code>ClipboardItem</code></strong> object, with the {{Glossary("MIME type")}} as the key and {{domxref("Blob")}} as the value</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface provides the following properties.</em></p>
+
+<dl>
+ <dt>{{domxref("ClipboardItem.types", "types")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of MIME types available within the <strong><code>ClipboardItem</code></strong>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines the following methods.</em></p>
+
+<dl>
+ <dt>{{domxref("ClipboardItem.getType", "getType()")}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Writing_To_Clipboard">Writing To Clipboard</h3>
+
+<p>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")}}.</p>
+
+<pre class="brush: js notranslate">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);
+  }
+}
+</pre>
+
+<h3 id="Reading_From_The_Clipboard">Reading From The Clipboard</h3>
+
+<p>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.</p>
+
+<pre class="brush: js notranslate">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);
+  }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#clipboarditem','ClipboardItem')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ClipboardItem")}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Image format support varies by browser. See the browser compatibility table for the {{domxref("Clipboard")}} interface.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li>
+ <li><a href="https://async-clipboard-api.glitch.me/">Async Clipboard API demo on Glitch</a></li>
+ <li><a href="https://web.dev/image-support-for-async-clipboard/">Image support for Async Clipboard article</a></li>
+</ul>