Vue實(shí)現(xiàn)獲取剪切板內(nèi)容的兩種方法

更新時(shí)間：2025年02月27日 09:13:09 作者：linab112

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)獲取剪切板內(nèi)容的兩種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下

1.說(shuō)明

在系統(tǒng)中的畫(huà)面或者時(shí)外部文件中進(jìn)行拷貝處理后，在頁(yè)面中可以獲取剪切板的內(nèi)容。

2.示例

方式①(直接獲取)

// 異步函數(shù)獲取剪切板內(nèi)容
async function getClipboardContent(ev: any) {
  try {
    ev.preventDefault()
    const clipboardText = await navigator.clipboard.readText();
    const str = clipboardText.split(' ')
    str.forEach(item => {
      if (item) {
        data.value.push({name: item})
      }
    })
    // 處理剪切板內(nèi)容
    console.log(str);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
    return null;
  }
}

點(diǎn)擊頁(yè)面中的按鈕，觸發(fā)上述方法，通過(guò)navigator.clipboard.readText()方法，獲取剪切板的內(nèi)容。使用這個(gè)方法出現(xiàn)這樣的問(wèn)題，當(dāng)從系統(tǒng)的頁(yè)面中拷貝內(nèi)容時(shí)，通過(guò)上述方法可以直接讀取剪切板的內(nèi)容，但是從系統(tǒng)外部的文件中拷貝內(nèi)容時(shí)，點(diǎn)擊頁(yè)面的按鈕觸發(fā)這個(gè)方法時(shí)，會(huì)出現(xiàn)一個(gè)粘貼按鈕，或者操作提示，只有再次點(diǎn)擊或者允許進(jìn)行操作時(shí)，才能獲取剪切板的內(nèi)容，這是瀏覽器的安全策略導(dǎo)致的。

方式②(間接獲取)

拷貝內(nèi)容后，在頁(yè)面中設(shè)置一個(gè)輸入框，現(xiàn)將拷貝的內(nèi)容粘貼到輸入框中，然后獲取輸入框的值從而獲取拷貝的內(nèi)容。

      <a-row :gutter="3" style="height: 30px">
        <a-col :span="22">
          <a-input v-model="pasteValue" placeholder="請(qǐng)粘貼要生成的內(nèi)容"/>
        </a-col>
        <a-col :span="1">
          <a-button @click="setData">
            <template #icon>
              <icon-copy/>
            </template>
          </a-button>
        </a-col>
      </a-row>
const setData = () => {
  const str = pasteValue.value.split(' ')
  str.forEach(item => {
    if (item) {
      data.value.push({name: item})
    }
  })
  pasteValue.value = ""
}

獲取拷貝的內(nèi)容通過(guò)空格進(jìn)行分割，從而獲取拷貝的數(shù)據(jù)列表。

3.總結(jié)

navigator.clipboard 的說(shuō)明

navigator.clipboard 是一個(gè) Web API，允許開(kāi)發(fā)者訪問(wèn)用戶的剪貼板內(nèi)容，主要用于復(fù)制和粘貼操作。這個(gè)接口提供了一些異步方法，能夠安全地讀寫(xiě)剪貼板數(shù)據(jù)。

writeText(text)

描述: 將文本寫(xiě)入剪貼板。

參數(shù): text - 要復(fù)制的字符串。

返回值: 返回一個(gè) Promise，在成功復(fù)制后解決。

navigator.clipboard.writeText('Hello, World!')
  .then(() => {
    console.log('文本已復(fù)制到剪貼板！');
  })
  .catch(err => {
    console.error('復(fù)制失敗: ', err);
  });

readText()

描述: 從剪貼板讀取文本。

返回值: 返回一個(gè) Promise，解決為剪貼板中的文本。

navigator.clipboard.readText()
  .then(text => {
    console.log('剪貼板中的文本: ', text);
  })
  .catch(err => {
    console.error('讀取失敗: ', err);
  });

使用注意事項(xiàng)

安全性: 訪問(wèn)剪貼板需要在 HTTPS 環(huán)境中進(jìn)行，或在 localhost 上。

用戶交互: 大多數(shù)瀏覽器要求在用戶的交互（如點(diǎn)擊按鈕）后才能執(zhí)行剪貼板操作，以防止濫用。

詳細(xì)示例

<button id="copyButton">復(fù)制文本</button>
<button id="pasteButton">粘貼文本</button>
<p id="output"></p>
 
<script>
  document.getElementById('copyButton').addEventListener('click', () => {
    navigator.clipboard.writeText('Hello, Clipboard!')
      .then(() => {
        console.log('文本已復(fù)制！');
      });
  });
 
  document.getElementById('pasteButton').addEventListener('click', () => {
    navigator.clipboard.readText()
      .then(text => {
        document.getElementById('output').textContent = text;
      });
  });
</script>

到此這篇關(guān)于Vue實(shí)現(xiàn)獲取剪切板內(nèi)容的兩種方法的文章就介紹到這了,更多相關(guān)Vue獲取剪切板內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: