Salesforce LWC學習(二十八) 複製內容到系統剪貼簿(clipboard)

zero.zhang發表於2020-12-13
Salesforce

本篇參考：

https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer

https://github.com/zenorocha/clipboard.js（第三方外掛庫，感興趣可以自己實現）

我們在做專案得時候，有時需要將指定內容複製到剪貼簿。對前端玩的好得會知道，js得瀏覽器擴充套件功能中包含和系統剪貼簿得互動，詳情可以檢視最上方連結。純HTML程式碼如下demo，這種demo當然百度一大堆。

<button onclick="handleCopy()">複製內容到剪貼簿</button>
<script type="text/javascript">
    function handleCopy(){
        var tag = document.createElement('textarea');
        tag.setAttribute('id', 'input_test_id');
        tag.value = 'test copy value \nthis is another line content';
        document.getElementsByTagName('body')[0].appendChild(tag);
        document.getElementById('input_test_id').select();
        document.execCommand('copy');
        document.getElementById('input_test_id').remove();
        alert('複製成功');
    }
</script>

瀏覽器執行效果：當點選 複製內容到剪貼簿按鈕以後，‘test copy value this is another line content’內容會賦值到剪貼簿（換行展示），展示alert，當我們在郵件或者其他文字工具中 右鍵貼上，便會將我們複製內容貼上。

 這裡得核心語句是使用了document.execCommand實現了複製得功能，那麼為什麼要先生成一個textarea框，然後再移除掉呢，我們檢視一下這個方法在MDN得定義。

通過定義我們可以發現，使用 document.execCommand得前提是隻允許操縱可編輯內容區域得元素，為了支援換行復制內容，所以我們只能先生成一個 textarea，然後進行拷貝操作以後，在移除。瞭解了以後，我們進行lwc得程式設計實現。

 在我們進行lwc得程式設計實現以前，需要先了解lwc得限制，即lwc不是支援所有得document得函式，因為lwc通過 lightning locker保證前端得安全性，通過上面得連結可以檢視到lwc中得 locker API viewer中提供得哪些對應得document函式是安全得可用的。

上述得功能都在locker 支援內，所以lwc程式碼也可以順利生成。demo如下：

clipboardDemo.html

<template>
    <lightning-button label="點我複製" onclick={handleCopyToClickboardEvent}></lightning-button>
</template>

clipboardDemo.js

import { LightningElement } from 'lwc';

export default class ClipboardDemo extends LightningElement {
    handleCopyToClickboardEvent(event) {
        let tag = document.createElement('textarea');
        tag.setAttribute('id', 'input_test_id');
        tag.value = 'test copy value\nthis is another line content';
        document.getElementsByTagName('body')[0].appendChild(tag);
        document.getElementById('input_test_id').select();
        document.execCommand('copy');
        document.getElementById('input_test_id').remove();
        alert('複製成功');
    }
}

總結：篇中簡單描述如何在lwc中實現 複製內容到剪貼簿。篇中有錯誤地方還請指出，有不懂歡迎留言。

相關文章