js 復制文本帶樣式

一鍵復制帶樣式的html文本到郵件

<div><div id='copy-content'><div style={{ fontSize: '16px',fontWeight: 500, lineHeight: '24px', color: '#222', marginBottom: '16px' }}>邀請您參加騰訊會議網絡研討會(Webinar)</div></div><Button onClick={handleCopy}>Copy</Button>
</div>
  1. 不帶樣式的純文本
const handleCopy = () => {// 獲取目標元素的innerHTMLlet innerHtml = document.getElementById('copy-content').innerHTML || ''// 處理innerHTML,使用轉義符代替<br>標簽const html = innerHtml.replace(/<br>/g, '\n').replace(/<[^>]*>/g, '');// 這是比較新的API,是一個異步方法navigator.clipboard.writeText(html).then(() => {// 按需處理想要的callbackmessage.success('復制成功');});}
  1. html文本
const handleCopy = () => {// 獲取目標元素的innerHTMLlet innerHtml = document.getElementById('copy-content').innerHTML || ''// 處理innerHTML,使用轉義符代替<br>標簽const html = innerHtml.replace(/<br>/g, '\n');// 這是比較新的API,是一個異步方法navigator.clipboard.writeText(html).then(() => {// 按需處理想要的callbackmessage.success('復制成功');});}
  1. 帶樣式的純文本
  const handleCopy= () => {const range = document.createRange();const element = document.getElementById('copy-content'); // 要復制的元素range.selectNode(element);window.getSelection().removeAllRanges();window.getSelection().addRange(range);document.execCommand('copy');window.getSelection().removeAllRanges();message.success('復制成功');};

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/40057.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/40057.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/40057.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用 /proc/sysrq-trigger 進行系統調試和故障排除

前言 在 Linux 系統中&#xff0c;/proc/sysrq-trigger 是一個強大的工具&#xff0c;提供了一種與系統進行低級別交互的方法。本文將詳細介紹 sysrq-trigger 的功能、使用方法及其在系統調試和故障排除中的應用。 什么是 /proc/sysrq-trigger? /proc/sysrq-trigger 是 Lin…

【HICE】web服務器搭建4

自定義多個ip地址訪問 1.下載httpd協議&#xff1a;dnf install httpd -y 2.編輯vhost.conf cd /etc/httpd cd /conf.d <directory /www> allowoverride none require all granted </directory> <virtualhost 192.168.244.130:80> documentroot /www s…

計算機視覺是什么,涉及的關鍵技術和應用領域

計算機視覺是一門技術&#xff0c;它是人工智能&#xff08;AI&#xff09;的一個重要分支&#xff0c;它使計算機能夠從圖像或視頻中識別、處理和理解視覺信息。它的研究和應用涉及多個領域&#xff0c;包括工業自動化、安全監控、醫療診斷、交通管理等。計算機視覺的應用非常…

07 docker 容器存儲持久化

目錄 1. Docker Volumes 特點 示例 2. Bind Mounts 特點 示例 對比總結 3. tmpfs Mounts 4. Docker Storage Plugins 5. Kubernetes Persistent Volumes 6. Network Attached Storage (NAS) 和 Storage Area Network (SAN) 1. Docker Volumes 使用存儲卷進行存儲持久…

什么是 API 代理?

API 代理就像是您的計算機和互聯網上特殊服務之間的中間人。它有點像集翻譯、保安和信使于一體。 什么是 API 代理&#xff1f; API 代理就像是您和在線服務之間的中間人。當您的計算機需要從某個特殊的在線服務 (API) 獲得某些東西時&#xff0c;API 代理會確保一切順利進行…

Eslint與Prettier搭配使用

目錄 前置準備 Eslint配置 Prettier配置 解決沖突 前置準備 首先需要安裝對應的插件 然后配置settings.json 點開之后就會進入settings.json文件里&#xff0c;加上這兩個配置 // 保存的時候自動格式化 "editor.formatOnSave": true, // 保存的時候使用prettier進…

1.2 ROS2安裝

1.2.1 安裝ROS2 整體而言&#xff0c;ROS2的安裝步驟不算復雜&#xff0c;大致步驟如下&#xff1a; 準備1&#xff1a;設置語言環境&#xff1b;準備2&#xff1a;啟動Ubuntu universe存儲庫&#xff1b;設置軟件源&#xff1b;安裝ROS2&#xff1b;配置環境。 請注意&…

拓撲學習系列(2)同調群、同倫群與基本群

同調群 同調群是拓撲空間的一個重要不變量&#xff0c;用于研究空間的“洞”的結構。同調群描述了拓撲空間中的閉合曲線、曲面等的性質&#xff0c;是拓撲學中的一個重要工具。以下是對同調群的詳細描述&#xff1a; 定義&#xff1a; 給定一個拓撲空間 X&#xff0c;對于每個…

【分布式系統】監控平臺Zabbix對接grafana

以前兩篇博客為基礎 【分布式系統】監控平臺Zabbix介紹與部署&#xff08;命令截圖版&#xff09;-CSDN博客 【分布式系統】監控平臺Zabbix自定義模版配置-CSDN博客 一.安裝grafana并啟動 添加一臺服務器192.168.80.104 初始化操作 systemctl disable --now firewalld set…

LeetCode 算法:路徑總和 III c++

原題鏈接&#x1f517;&#xff1a;路徑總和 III 難度&#xff1a;中等???? 題目 給定一個二叉樹的根節點 root &#xff0c;和一個整數 targetSum &#xff0c;求該二叉樹里節點值之和等于 targetSum 的 路徑 的數目。 路徑 不需要從根節點開始&#xff0c;也不需要在葉…

操作系統調度算法、頁面置換算法總結

常見的進程調度算法 FCFS:非搶占、先來先服務。 對短進程不利。 優先級調度算法:在支持搶占的系統中,當新進程進入就緒隊列時,如果它的優先級高于當前運行進程的優先級,那么就會搶占CPU;在非搶占系統中,只是將新進程加入了就緒隊列中。 最短作業優先調度算法(SJF) …

去中心化經濟的革新:探索Web3的新商業模式

隨著區塊鏈技術的發展&#xff0c;Web3正逐漸成為全球經濟和商業模式的關鍵詞之一。Web3不僅僅是技術的革新&#xff0c;更是對傳統中心化商業模式的挑戰和重構。本文將深入探討Web3背后的概念、關鍵技術以及其帶來的新商業模式&#xff0c;帶領讀者走進這一新興領域的深度分析…

272. 最長公共上升子序列

Powered by:NEFU AB-IN Link 文章目錄 272. 最長公共上升子序列題意思路代碼 272. 最長公共上升子序列 題意 如題 思路 若按這個思路的話&#xff0c;代碼為 O ( n 3 ) O(n^3) O(n3) for (int i 1; i < n; i ) {for (int j 1; j < n; j ){f[i][j] f[i - 1][j];…

SpringSecurity中文文檔(Servlet Password Storage)

存儲機制&#xff08;Storage Mechanisms&#xff09; 每種支持的讀取用戶名和密碼的機制都可以使用任何支持的存儲機制&#xff1a; Simple Storage with In-Memory AuthenticationRelational Databases with JDBC AuthenticationCustom data stores with UserDetailsServic…

Cube大小與性能的博弈:Kylin查詢性能優化指南

Cube大小與性能的博弈&#xff1a;Kylin查詢性能優化指南 在Apache Kylin的多維數據分析世界中&#xff0c;Cube是核心組件&#xff0c;它直接影響查詢性能和系統資源的使用。理解Cube大小與查詢性能之間的關系對于構建高效的數據分析平臺至關重要。本文將深入探討Kylin中Cube…

FW SystemUI Keyguard解析(二)

文章目錄 CTS之Keyguard Menu事件處理 CTS之Keyguard Menu事件處理 事件觸發點: NotificationShadeWindowViewController.dispatchKeyEvent 設置setInteractionEventHandler回調之后通過NotificationShadeWindowView 觸發 調用到return mService.onMenuPressed(); public cla…

31-Pandas index操作索引

Pandas index操作索引 索引&#xff08;index&#xff09;是 Pandas 的重要工具&#xff0c;通過索引可以從 DataFame 中選擇特定的行數和列數&#xff0c;這種選擇數據的方式稱為“子集選擇”。 在 Pandas 中&#xff0c;索引值也被稱為標簽&#xff08;label&#xff09;&a…

簡單的text/html無法解析解決記錄

簡單的text/html無法解析解決記錄 1. bug發現 我們所有的服務都是微服務&#xff0c;服務間調用都是使用feign接口進行調用&#xff0c;正常調用都沒有問題&#xff0c;但是某一天發現部分從esb服務調用過來到我們本地的服務&#xff0c;本地服務再使用feign接口調用其他微服…

DPO算法推導

DPO 核心思想&#xff1a;直接使用偏好數據進行策略優化&#xff0c;省去 reward 模型策略優化。 技術背景知識&#xff1a; 首先給定prompt x&#xff0c;生成兩個答案 ( y 1 , y 2 ) Π S F T ( y ∣ x ) (y_1,y_2)~\Pi^{SFT}(y|x) (y1?,y2?) ΠSFT(y∣x) &#xff0c;并通…

2. Python+Playwright playwright的API

Playwright支持同步和異步兩種API&#xff0c;使用異步API需要導入asyncio庫&#xff0c;它是一個可以用來實現Python協程的庫&#xff0c;更詳細介紹可參考Python協程 。我們可以根據自己的偏好選擇適合的模式。 同步與異步模式原理 同步操作方式&#xff1a;在代碼執行時&am…