前端實現JS復制功能及復制內容可換行

復制功能：

function copy(codeData){

        const textarea = document.createElement('textarea'); // 直接構建textarea  「注意：這里為了實現換行，需要創建textarea，如果用input的話，實現不了換行。」

       textarea.value = '目的地編碼:\r\n123456789\r\n987456223\r\ncodetest123\r\n'; // 設置內容    「注意： \r\n 是 換行 符號」

       document.body.appendChild(textarea); // 添加臨時實例

       textarea.select(); // 選擇實例內容

       document.execCommand('Copy'); // 執行復制

       document.body.removeChild(textarea); // 刪除臨時實例

       console.log('復制成功!');

       ElMessage({

         message: '復制成功',

         type: 'success',

       });

}
let codeData = [{code:'xxx'},...];
copy(codeData);

復制內容效果：

目的地編碼：
xxxxxxxx1
xxxxxxxx2
xxxxxxxx3
...

 

注意：如果復制的文本內容不需要換行，用 input 即可。涉及到換行操作的用 textarea 標簽。

 

 

 

 

參考鏈接：

      https://blog.csdn.net/weixin_34827675/article/details/112162971?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=2