ClipboardItem

Hàm tạo

ClipboardItem()

Tạo một đối tượng ClipboardItem mới, với MIME type làm khóa và dữ liệu làm giá trị.

Thuộc tính thể hiện

types Read only

Trả về một Array các kiểu MIME hiện có trong ClipboardItem.

presentationStyle Read only

Trả về một trong các giá trị sau: "unspecified", "inline" hoặc "attachment".

Phương thức tĩnh

ClipboardItem.supports()

Kiểm tra xem một MIME type cho trước có được clipboard hỗ trợ hay không. Điều này cho phép website phát hiện liệu một kiểu MIME có được hỗ trợ trước khi thử ghi dữ liệu hay không.

Phương thức thể hiện

getType()

Trả về một Promise được giải quyết với một Blob của MIME type được yêu cầu, hoặc lỗi nếu không tìm thấy kiểu MIME đó.

Ví dụ

Ghi văn bản vào clipboard

Trong ví dụ này, đầu tiên chúng ta định nghĩa hai hằng chứa tham chiếu đến một phần tử <p> có chứa văn bản và một phần tử <button>.

Tiếp theo, chúng ta định nghĩa một hàm tên là copyToClipboard(). Hàm này bắt đầu bằng cách lưu kiểu MIME "text/plain" vào một hằng, rồi tạo một đối tượng tên là clipboardItemData chứa một thuộc tính có khóa bằng kiểu MIME và giá trị là văn bản mà chúng ta muốn sao chép vào clipboard (trong trường hợp này là nội dung của phần tử <p>). Vì chúng ta đang làm việc với văn bản, có thể truyền trực tiếp thay vì phải tạo một Blob.

Chúng ta tạo một đối tượng ClipboardItem mới bằng hàm tạo ClipboardItem(), rồi truyền nó vào phương thức Clipboard.write() để sao chép văn bản vào clipboard.

Cuối cùng, chúng ta thêm một trình lắng nghe sự kiện cho <button> để chạy hàm khi nút được nhấn.

const textSource = document.querySelector("p");
const copyBtn = document.querySelector("button");

async function copyToClipboard() {
  const type = "text/plain";
  const clipboardItemData = {
    [type]: textSource.textContent,
  };
  const clipboardItem = new ClipboardItem(clipboardItemData);
  await navigator.clipboard.write([clipboardItem]);
}

copyBtn.addEventListener("click", copyToClipboard);

Ghi một ảnh vào clipboard

Ở đây, chúng ta dùng supports() để kiểm tra xem kiểu dữ liệu MIME image/svg+xml có được hỗ trợ hay không. Nếu có, chúng ta lấy một ảnh SVG bằng Fetch API, rồi đọc nó vào một Blob, sau đó dùng blob này để tạo một ClipboardItem được ghi vào clipboard.

async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/svg+xml")) {
      const imgURL = "/my-image.svg";
      const data = await fetch(imgURL);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("Fetched image copied.");
    } else {
      console.log("SVG images are not supported by the clipboard.");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Đọc từ clipboard

Ở đây, chúng ta trả về tất cả các mục trong clipboard thông qua phương thức clipboard.read(). Sau đó dùng thuộc tính ClipboardItem.types để đặt đối số cho getType() và trả về đối tượng blob tương ứng.

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

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• ClipboardChangeEvent
• Clipboard API
• Bài viết về hỗ trợ ảnh cho Async Clipboard