背景

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

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

<html>

<head>

    <meta charset="utf-8">

    <title>gen_codereview</title>

    <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. 进入work，粘贴内容效果如下。
结语

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

JS实现复制富文本到剪贴板/粘贴板的最佳实践的更多相关文章

  1. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  2. 用javascript复制富文本

    由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样.现在希望使用jav ...

  3. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 富文本编辑器+可粘贴word内容

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  6. tmux复制到windows剪贴板/粘贴板的坑

    以下所有操作都是在windows下面用putty连接linux centos6的情景下. 一直很纳闷为什么在tmux模式下不能把复制到的文字放到系统的粘贴板里面呢?通过层层阻碍,终于找到了原因. 去掉 ...

  7. Intellij IDE使用 ideavim，不能复制文档到系统粘贴板

    vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...

  8. js统一设置富文本中的图片宽度

    var txt = layedit.getContent(ieditor);//获取编辑器内的文本var regex = new RegExp('<img', 'gi');txt = txt.r ...

  9. js大法处理富文本输入

  10. 富文本编辑器直接从 word 中复制粘贴公式

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

随机推荐

  1. C# 通过反射获取类字段名和值并加入到字典中(包含递归获取)

    //测试类 public class HKAddvisitor1{    public string code { set; get; }    public string msg { set; ge ...

  2. .Net6 微服务之Ocelot+IdentityServer4入门看这篇就够了

    前言 .Net 6 使用 Consul 实现服务注册与发现 看这篇就够了.Net6 使用 Ocelot + Consul 看这篇就够了.Net6 微服务之Polly入门看这篇就够了 书接上文,本文将继 ...

  3. Qt中的多窗体编程（续一）

    在前面一节中,已经把所有需要的窗体都创建好了,下面将依次实现预设的功能. 一.实现点击菜单打开模式子窗体的功能. 1.在编辑模式下双击Forms下的"mainWindow.ui", ...

  4. JDBC：实现Java与数据库的连接

    先了解重要的编程思想:ORM(object relational mapping) 即将数据库与JAVA的类一一映射(对应) 一个数据表对应一个Java类 表中的一条记录对应Java类的一个对象 表中 ...

  5. 开始学python不知该怎么学？Python基础教程（第2版） 免费下载

    Python基础教程(第2版)pdf高清版免费下载  解压码:n0nl   内容简介  · · · · · · 本书是经典教程的全新改版,作者根据Python 3.0版本的种种变化,全面改写了书中内容 ...

  6. 数据类型之字符串（string）（四）

    字符串本质是:字符序列不可变1.字符串编码,Unicode ord('A') ord('王') 2.创建字符串,引号 a = 'Hello python!' b = "I'm a teach ...

  7. 【剑指Offer】【链表】复杂链表的复制

    题目:输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否则判 ...

  8. 均值、中值、高斯、non-local means算法详解

    文章仅为个人理解,如有不妥之处欢迎指正. 写几个常见的图像去噪滤波器. 1.均值滤波器 均值滤波器是最简单的图像平滑滤波器,其3*3的模板为 1 9 [ 1 1 1 1 1 1 1 1 1 ] \fr ...

  9. spring 理念与项目构建

    spring理念: 使现有的技术更容易使用,其本身是一个大杂烩,整合了现有的技术框架. ssh: struct2 spring hibernate ssm :springmvc spring myba ...

  10. jekins+svn

    1.jekins安装可以看jekins+shell随笔. 2.安装svn. yum -y install subversion 3.配置相关文件 mkdir   家目录 cd 到家目录修改conf下三 ...