html 一键复制功能以及下载功能

kuilaurence

已于 2024-03-05 15:00:03 修改

阅读量2.9k

点赞数 2

分类专栏： VUE_Rect_JS_TS 文章标签： html5

于 2021-01-05 17:44:00 首次发布

本文链接：https://blog.csdn.net/kuilaurence/article/details/112248248

版权

VUE_Rect_JS_TS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1.需要引入库:clipboard.min.js cdn地址:https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js
2.代码demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
  <body>
    <span id="ttt">1234567654321</span>
    <button type="button" id="btn_Share" onclick="test('#btn_Share')">
      copy
    </button>
  </body>
  <script>
    function test(element) {
      var clipboard = new ClipboardJS(element, {      //绑定元素id
        text: function () {
          var str = document.getElementById("ttt").innerText;
          return str;
        },
      });
      clipboard.on("success", function (e) {
        alert("复制成功");
      });
      clipboard.on("error", function (e) {
        alert(e);
      });
    }
  </script>
</html>

下载文件：

    downLoad(str: string,name: string) {//str为下载的文本内容 name为文件名
      let export_blob = new Blob([str]);
      let save_link = document.createElement("a");
      save_link.href = window.URL.createObjectURL(export_blob);
      save_link.download = name + ".txt";
      let ev = document.createEvent("MouseEvents");
      ev.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0, null);
      save_link.dispatchEvent(ev);
    },