Clipboard: phương thức write()

Cú pháp

write(data)

Tham số

data

Một mảng các đối tượng ClipboardItem chứa dữ liệu sẽ được ghi vào clipboard.

Giá trị trả về

Một Promise được phân giải khi dữ liệu đã được ghi vào clipboard. Lưu ý rằng nếu hệ điều hành bên dưới không hỗ trợ nhiều mục clipboard gốc trên clipboard hệ thống, thì chỉ ClipboardItem đầu tiên trong mảng được ghi.

Promise bị từ chối nếu clipboard không thể ghi vào clipboard.

Ngoại lệ

NotAllowedError DOMException

Ném ra nếu việc ghi vào clipboard không được cho phép.

Consideration về bảo mật

Việc ghi vào clipboard chỉ có thể được thực hiện trong secure context.

Các yêu cầu bảo mật bổ sung được đề cập trong phần Consideration về bảo mật của chủ đề tổng quan API.

Ví dụ

Ghi văn bản vào clipboard

Hàm ví dụ này thay thế nội dung hiện tại của clipboard bằng một chuỗi đã chỉ định khi nhấn nút. Lưu ý rằng trong trường hợp này, bạn cũng có thể sử dụng Clipboard.writeText().

button.addEventListener("click", () => setClipboard("<empty clipboard>"));

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

Hàm setClipboard() chỉ định kiểu MIME "text/plain" trong hằng số type, sau đó chỉ định một đối tượng clipboardItemData với một thuộc tính duy nhất — khóa của nó là kiểu MIME, và giá trị của nó là văn bản được truyền vào mà chúng ta muốn ghi vào clipboard. Sau đó chúng ta xây dựng một đối tượng ClipboardItem mới mà đối tượng clipboardItemData được truyền vào.

Cuối cùng, write() được gọi với await để ghi dữ liệu vào clipboard.

Ghi nội dung canvas vào clipboard

Ví dụ này vẽ một hình chữ nhật màu xanh lên canvas. Bạn có thể nhấp vào hình chữ nhật để sao chép nội dung của canvas vào clipboard dưới dạng hình ảnh, sau đó chọn phần tử khác và dán nội dung từ clipboard.

HTML

HTML chỉ định nghĩa phần tử <canvas> và phần tử <div> có id target nơi hình ảnh canvas sẽ được dán vào.

<canvas id="canvas" width="100" height="100"></canvas>

<div id="target">Dán vào đây.</div>

<pre id="log"></pre>

#log {
  height: 60px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

Đầu tiên chúng ta định nghĩa một hàm async để sao chép canvas vào blob. Hàm này bao bọc phương thức HTMLCanvasElement.toBlob() kiểu callback cũ thành hàm dựa trên Promise trực quan hơn.

// Phương thức Async/await thay thế callback của toBlob()
async function getBlobFromCanvas(canvas) {
  return new Promise((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) {
        resolve(blob);
      } else {
        reject(new Error("Canvas toBlob failed"));
      }
    });
  });
}

Tiếp theo chúng ta thiết lập canvas và thêm trình lắng nghe sự kiện cho sự kiện click.

Khi bạn nhấp vào hình chữ nhật màu xanh, canvas hiển thị hình chữ nhật được sao chép vào blob, sau đó blob được thêm vào ClipboardItem và sau đó được ghi vào clipboard.

const canvas = document.getElementById("canvas");

// Thiết lập canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = "cornflowerblue";
ctx.fillRect(0, 0, 100, 100);

canvas.addEventListener("click", copyCanvasContentsToClipboard);
const target = document.getElementById("target");

async function copyCanvasContentsToClipboard() {
  // Sao chép canvas vào blob
  try {
    const blob = await getBlobFromCanvas(canvas);
    // Tạo ClipboardItem với blob và kiểu của nó, thêm vào mảng
    const data = [new ClipboardItem({ [blob.type]: blob })];
    // Ghi dữ liệu vào clipboard
    await navigator.clipboard.write(data);
    log("Đã sao chép");
  } catch (error) {
    log(error);
  }
}

Lưu ý rằng nếu bạn đang fetch một loại tệp ít phổ biến hơn hoặc một tài nguyên mà bạn không biết kiểu trước, bạn có thể muốn sử dụng ClipboardItem.supports() để kiểm tra xem loại tệp có được hỗ trợ không và cung cấp thông báo lỗi tốt cho người dùng trong trường hợp nó không được hỗ trợ.

Sau đó chúng ta định nghĩa trình lắng nghe sự kiện cho sự kiện paste trên phần tử nơi chúng ta muốn hiển thị nội dung clipboard dưới dạng hình ảnh. API FileReader cho phép chúng ta đọc blob bằng phương thức readAsDataUrl và tạo phần tử <img> với nội dung canvas:

target.addEventListener("paste", (event) => {
  const items = (event.clipboardData || window.clipboardData).items;
  const blob = items[0].getAsFile();
  const reader = new FileReader();

  reader.addEventListener("load", (event) => {
    const img = new Image();
    img.src = event.target.result;
    target.appendChild(img);
  });

  reader.readAsDataURL(blob);
});

body {
  font-family: sans-serif;
}
#target {
  border: 2px solid;
  padding: 1rem;
  height: 150px;
}
img {
  margin: 0.5rem;
}

Kết quả

Kết quả được hiển thị bên dưới. Đầu tiên nhấp vào hình vuông màu xanh, sau đó chọn văn bản "Paste here" và sử dụng tổ hợp phím phù hợp với hệ điều hành của bạn để dán từ clipboard (chẳng hạn như Ctrl+V trên Windows).

Các đặc tả kỹ thuật

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

Xem thêm

• API Clipboard
• Bài viết về hỗ trợ hình ảnh cho Async Clipboard
• Clipboard.writeText()
• Clipboard.read()
• Clipboard.readText()