// 復(fù)制文本內(nèi)容
  function copyContent (content) {
    // 復(fù)制結(jié)果
    let copyResult = true
    // 設(shè)置想要復(fù)制的文本內(nèi)容
    const text = content || '讓我們一起快樂的敲代碼吧~';
    // 判斷是否支持clipboard方式
    if (!!window.navigator.clipboard) {
      // 利用clipboard將文本寫入剪貼板（這是一個(gè)異步promise）
      window.navigator.clipboard.writeText(text).then((res) => {
        console.log('復(fù)制成功');
        // 返回復(fù)制操作的最終結(jié)果
        return copyResult;
      }).catch((err) => {
        copyResult = false
        console.log('復(fù)制失敗', err);
        // 返回復(fù)制操作的最終結(jié)果
        return copyResult;
      })
    } else {
      // 不支持clipboard方式 則采用document.execCommand()方式
      // 創(chuàng)建一個(gè)input元素
      let inputDom = document.createElement('textarea');
      // 設(shè)置為只讀 防止移動(dòng)端手機(jī)上彈出軟鍵盤  
      inputDom.setAttribute('readonly', 'readonly');
      // 給input元素賦值
      inputDom.value = text;
      // 將創(chuàng)建的input添加到body
      document.body.appendChild(inputDom);
      // 選中input元素的內(nèi)容
      inputDom.select();
      // 執(zhí)行瀏覽器復(fù)制命令
      // 復(fù)制命令會將當(dāng)前選中的內(nèi)容復(fù)制到剪切板中（這里就是創(chuàng)建的input標(biāo)簽中的內(nèi)容）
      // Input要在正常的編輯狀態(tài)下原生復(fù)制方法才會生效
      const result = document.execCommand('copy')
      // 判斷是否復(fù)制成功
      if (result) {
        console.log('復(fù)制成功');
      } else {
        console.log('復(fù)制失敗');
        copyResult = false
      }
      // 復(fù)制操作后再將構(gòu)造的標(biāo)簽 移除
      document.body.removeChild(inputDom);
      // 返回復(fù)制操作的最終結(jié)果
      return copyResult;
    }
  }

  <button onclick="clickRead()">點(diǎn)擊訪問剪貼板</button>
  <p>我想調(diào)用Clipboard API來讀取剪貼板信息</p>
  <p>我想2342342342432</p>
  <img src="./image/img.png" alt="">
  <div>23423423422</div>
  <script>
    // 在剛進(jìn)入頁面時(shí)，先嘗試獲取剪貼板的內(nèi)容
    window.navigator.clipboard.read().then((res) => {
      console.log('read--res-----', res);
    }).catch((err) => {
      console.log('read--err-----', err);
    })
    // 在剛進(jìn)入頁面時(shí)，先嘗試獲取剪貼板的文本內(nèi)容
    window.navigator.clipboard.readText().then((res) => {
      console.log('readText--res-----', res);
    }).catch((err) => {
      console.log('readText--err-----', err);
    })
    // 用戶點(diǎn)擊按鈕事件
    function clickRead () {
      // 再次嘗試獲取剪貼板的內(nèi)容 promise異步操作
      window.navigator.clipboard.read().then((res) => {
        console.log('用戶點(diǎn)擊-read--res-----', res);
        res[0].types.forEach((type, index) => {
          // 通過getType讀取剪貼板中對應(yīng)的數(shù)據(jù)內(nèi)容 并返回相應(yīng)blob對象
          res[0].getType(type).then(res => {
            console.log('blob--', res);
            let reader = new FileReader();
            // 為了方便查看  將bolb轉(zhuǎn)為base64 （異步操作）
            reader.readAsDataURL(res);
            // 轉(zhuǎn)換成功
            reader.onload = () => {
              if (index === 0) {
                console.log('用戶剪貼板中的所有文本內(nèi)容轉(zhuǎn)換成的base64--', reader.result);
              } else
                if (index === 1) {
                  console.log('用戶剪貼板中的所有數(shù)據(jù)內(nèi)容內(nèi)容轉(zhuǎn)換成的base64--', reader.result);
                }
            };
          });
        })
      }).catch((err) => {
        // 讀取失敗的情況
        console.log('用戶點(diǎn)擊-read--err-----', err);
      })
      // 在用戶點(diǎn)擊事件中 再次嘗試獲取剪貼板的文本內(nèi)容
      window.navigator.clipboard.readText().then((res) => {
        // 讀取成功的情況
        console.log('用戶點(diǎn)擊-readText--res-----', res);
      }).catch((err) => {
        // 讀取失敗的情況
        console.log('用戶點(diǎn)擊-readText--err-----', err);
      })
    }
  </script>

  <!-- 點(diǎn)擊選擇文件寫入到剪貼板 -->
  <input type="file" onchange="clickWrite(event)">
<script>
    // 在剛進(jìn)入頁面時(shí)，先嘗試向剪貼板寫入內(nèi)容
    // 定義數(shù)據(jù)類型
    const type = "text/plain";
    // 創(chuàng)建一個(gè)blob對象
    const blob = new Blob(['我是要通過write()寫入剪貼板的內(nèi)容1111'], { type });
    // 創(chuàng)建一個(gè)ClipboardItem對象數(shù)組
    const data = [new ClipboardItem({ [type]: blob })];
    console.log('data--', data);
    // 將數(shù)據(jù)寫入剪貼板
    window.navigator.clipboard.write(data).then((res) => {
      console.log('write--res-----', res);
      // 輸出剪貼板中的內(nèi)容
      window.navigator.clipboard.readText().then((res) => {
        console.log('readText--res-----', res);
      }).catch((err) => {
        console.log('readText--err-----', err);
      })
    }).catch((err) => {
      console.log('write--err-----', err);
    })
    // 因?yàn)樽x寫都是異步操作 為了避免兩個(gè)寫操作互相干擾 所以等待1秒后 再嘗試向剪貼板寫入文本內(nèi)容
    setTimeout(() => {
      window.navigator.clipboard.writeText('我是要通過writeText()寫入剪貼板的文本內(nèi)容2222').then((res) => {
        console.log('writeText--res-----', res);
        // 輸出剪貼板中的內(nèi)容
        window.navigator.clipboard.readText().then((res) => {
          console.log('readText--res-----', res);
        }).catch((err) => {
          console.log('readText--err-----', err);
        })
      }).catch((err) => {
        console.log('writeText--err-----', err);
      })
    }, 1000)
    // 用戶選擇圖片寫入剪貼板事件
    function clickWrite (e) {
      console.log('file--', e.target.files[0]);
      // 定義數(shù)據(jù)類型
      const type = "image/png";
      // 創(chuàng)建一個(gè)ClipboardItem對象數(shù)組
      const data = [new ClipboardItem({ [type]: e.target.files[0] })];
      console.log('data--', data);
      // 將數(shù)據(jù)寫入剪貼板
      window.navigator.clipboard.write(data).then((res) => {
        console.log('write--res-----', res);
        // 輸出剪貼板中的內(nèi)容
        window.navigator.clipboard.read().then((res) => {
          console.log('read--res-----', res);
        }).catch((err) => {
          console.log('read--err-----', err);
        })
      }).catch((err) => {
        console.log('write--err-----', err);
      })
    }
  </script>

var clipboardEvent = new ClipboardEvent(type[, options]);
// 實(shí)例
var clipboardEvent = new ClipboardEvent('paste', {
    clipboardData: new DataTransfer()
});

var clipboardEvent = new ClipboardEvent('paste', {
      clipboardData: new DataTransfer()
});
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));
clipboardEvent.clipboardData.setData('text/plain', 'Clipboard API來讀取剪貼板信息');
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));

new ClipboardItem(data[, options])
// 實(shí)例
const test = new ClipboardItem({ ["text/plain"]: new Blob(['我是小朱同學(xué)'], { "text/plain" }) }

ClipboardItem.types.forEach(type => {
 		ClipboardItem.getType(type).then(res => {
            console.log('blob--', res);
    })
})

cosnt result = document.execCommand(aCommandName[,aShowDefaultUI,aValueArgument])

function copyInputContent () {
    // 設(shè)置想要復(fù)制的文本內(nèi)容
    const text = '讓我們一起快樂的敲代碼吧~';
    // 創(chuàng)建一個(gè)input元素
    let inputDom = document.createElement('textarea');
    // 設(shè)置為只讀 防止移動(dòng)端手機(jī)上彈出軟鍵盤  
    inputDom.setAttribute('readonly', 'readonly');
    // 給input元素賦值
    inputDom.value = text;
    // 將創(chuàng)建的input添加到body
    document.body.appendChild(inputDom);
    // 選中input元素的內(nèi)容
    inputDom.select();
    // 執(zhí)行瀏覽器復(fù)制命令
    // 復(fù)制命令會將當(dāng)前選中的內(nèi)容復(fù)制到剪切板中（這里就是創(chuàng)建的input標(biāo)簽中的內(nèi)容）
    // Input要在正常的編輯狀態(tài)下原生復(fù)制方法才會生效
    const result = document.execCommand('copy')
    // 復(fù)制操作后再將構(gòu)造的標(biāo)簽 移除
    document.body.removeChild(inputDom);
  }