JS实现复制富文本到剪贴板/粘贴板的最佳实践

背景

最近有想实现一个功能，通过点击一个button按钮，来复制网页内容(含html)来实现复制后粘贴到邮件或者word具有富文本的效果。在网站翻了一些资料，要么就是方法已经被弃用，要么就是兼容性特别差，要么就是不能复制成为富文本。最后还是通过clipboard-polyfill.js(https://github.com/lgarron/clipboard-polyfill)来解决了问题。下面来介绍怎么使用。

使用

npm install clipboard-polyfill
然后从node_modules dist文件夹里面找出来核心的js(clipboard-polyfill.js)放于html同级目录。
编写html，实现复制功能。

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>gen_codereviewtitle>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    script>
    <script src="clipboard-polyfill.js">
    script>
    <script>
      $(document).ready(function(){
        $("#btn1").click(() =>{
          var item = new clipboard.ClipboardItem({
            "text/html": new Blob(
              [document.getElementById('div1').outerHTML],
              { type: "text/html" }
            )
          });
          clipboard.write([item]);
          alert('复制成功，请前去word粘贴')
        })
      });
    script>
head>
<body>
<button id="btn1">
    点击复制如下div内容
button>
<div contenteditable="true" id="div1" style="font-size: 12px;border: 1px dashed;margin-top: 20px;padding: 10px;width: fit-content;color: red;">
    this is content
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

页面展示如下，点击按钮复制。
进入work，粘贴内容效果如下。

结语

今天的内容就先分享到这里，使用过程中有什么问题，欢迎下方留言讨论哟。

相关阅读:
14：00面试，14：06就出来了，问的问题有点变态。。。。。。
金九银十又到了分享面试经验的时候了
[MySQL][表的增删查改][二][Retrieve][SELECT][WHERE]详细讲解
react--redux
SQL电脑性能测试
java 使用多线程模拟大气测试数据传感器和计算机显示数据
springboot摄影器材设备租赁系统java
【每周研报复现】AI量化特征工程之alphalens：一套用于分析 alpha 因子的通用工具
【每日一题(并查集，字符串)--8.9】
LeetCode每日一题：1488. 避免洪水泛滥（2023.10.13 C++)

原文地址：https://blog.csdn.net/qq_21891743/article/details/127921440