前端常用:复制到剪切板和下载

概述

前端有 2 个常用的功能函数,其中一个是复制到剪切板,另一个是下载。我总结了一下它们的实现,记录下来,供以后开发时参考,相信对其他人也有用。

复制到剪切板

需要先安装 clipboard.js 库,然后代码如下:

import ClipboardJS from 'clipboard';

function copyToClipboard(text) {
  if (!ClipboardJS.isSupported()) {
    return Promise.reject(new Error('not supported'));
  }

  return new Promise((resolve, reject) => {
    const fakeElement = document.createElement('button');
    const clipboard = new ClipboardJS(fakeElement, {
      text: () => text,
    });

    clipboard.on('error', (e) => {
      clipboard.destroy();
      reject(e);
      console.error('Copy failed Action:', e.action);
      console.error('Copy failed Trigger:', e.trigger);
    });

    clipboard.on('success', (e) => {
      clipboard.destroy();
      resolve(e);
    });

    fakeElement.click();
  });
}

export default copyToClipboard;

下载功能

原生。代码如下:

function download(url = '') {
  if (url) {
    const fakeLink = document.createElement('a');
    fakeLink.href = url;
    fakeLink.click();
  }
}

export default download;

原文地址:https://www.cnblogs.com/yangzhou33/p/11723243.html

时间: 2024-08-01 22:47:11

前端常用:复制到剪切板和下载的相关文章

jQuery实现复制到剪切板

前段时间需要做一个点击一个按钮,把制定内容复制到剪切板的效果. 对于IE浏览器而言,有一简单的方法,通过 window.clipboardData: (假如有一个id为copy的按钮,有一个id为name的输入框,“text”为固定格式) $("#copy").click(function () { window.clipboardData.setData("text", $("#name").val()); alert("已复制到剪贴

[JavaScript] js 复制到剪切板

zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件. 首先页面中载入ZeroClipboard.js ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf 的地址. demo: <!DOCTYPE html> <html

原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板

原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板 一.主要实现以下功能:1.用鼠标选择单元格(可谓连续单元格,也可为不连续的)后,按照要求格式“证件号码:+选定内容+“,”+”选定内容“等等进行合并2.合并后的内容,直接复制到剪切板二.代码示例: Sub TestA() Set a = New DataObject '情况存放合并结果的单元格内容 Range("B2") = "" '开始合并选择单元格的内容 For Each C In Select

Flash10下复制到剪切板的一种新方法

web开发中常常要实现“复制到剪切板”功能.这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了.Firefox默认下不能直接通过Javascript操作剪切板,必须开启相关的设置才行.想只通过Javascript技术实现跨浏览器的剪切板是行不通的.现在常用的方法是利用JavaScript+Flash实现,普遍流传的办法是_clipboard.swf,这是国外最早实现的(著名的Clipboard Copy解决方案: http://www.jeffothy.com/we

复制到剪切板 兼容(IE/FF/Chrome/..)

最近做一个复制到剪切板的功能   在网上找了很多都不好用 最后发现在了  这篇文章很不错  简洁好用   贴出来  希望能帮到更多人 原文地址:http://www.lsproc.com/wiki/snippets:copytoclipboard 此代码修改自 discuz!, 简易实现 <script> var clipboardswfdata; var setcopy_gettext = function(){ clipboardswfdata = document.getElementB

iOS社交分享Twitter、Facebook、复制到剪切板、LINE、及邮件

准备 首先要引进如下三个framework: MessageUI.framework Social.framework Accounts.framework 并在实现这几个方法的地方引入以下几个头文件 #import <MessageUI/MFMailComposeViewController.h> #import <Social/Social.h> #import <Accounts/Accounts.h> Twitter及Facebook 其中urlStr为我分享的

jquery实现点击复制到剪切板

1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> 2.js实现点击复制的代码 <script type="text/jav

Java 访问(复制,粘贴)剪切板(转)

以下共有4个函数分别是: 1.从剪切板获得文字. 2.将字符串复制到剪切板. 3.从剪切板获得图片. 4.复制图片到剪切板. Java代码   /** * 从剪切板获得文字. */ public static String getSysClipboardText() { String ret = ""; Clipboard sysClip = Toolkit.getDefaultToolkit().getSystemClipboard(); // 获取剪切板中的内容 Transfera

将标题空格替换为 &#39;_&#39; , 并自动复制到剪切板上

代码: #include <stdio.h> #include <string.h> #include <windows.h> #include <conio.h> //清空剪切板 int ClearClipboradBuffer() { HGLOBAL hClipboard = NULL; if( OpenClipboard( NULL ) ) { hClipboard = GetClipboardData( CF_TEXT ); GlobalFree(