react实现获取复制粘贴过来的文件，文字。reactnative复制文字

待我称王封你为后i 2022-12-31 13:20 290阅读 0赞

*  获取复制的文件名

HTML

JQuery

$('body').bind('paste', function(a, b, c) {
    
        console.log(a.originalEvent.clipboardData);
        console.log(a.originalEvent.clipboardData.getData('File'));
        console.log(a.originalEvent.clipboardData.getData('Text'));
        if (a.originalEvent.clipboardData.files[0]) console.log(a.originalEvent.clipboardData.files[0].getAsFile());
        if (a.originalEvent.clipboardData.items[0]) console.log(a.originalEvent.clipboardData.items[0].getAsFile());
        console.log(a, b, c);
    }
    
    
    );

此代码能够读取复制粘贴的文件名，注意哦，是文件名

*  获取复制的文字

copyTranslateResult = () => {
            const copyDOM = document.querySelector('.translateResult');
            if (copyDOM.innerHTML !== '') {
                var range = document.createRange(); //创建一个range
                window.getSelection().removeAllRanges(); //清楚页面中已有的selection
                range.selectNode(copyDOM); // 选中需要复制的节点
                window.getSelection().addRange(range); // 执行选中元素
                var successful = document.execCommand('copy'); // 执行 copy 操作
                if (successful) {
                    message.success('复制成功！');
                } else {
                    message.warning('复制失败，请手动复制！');
                }
                // 移除选中的元素
                window.getSelection().removeAllRanges();
    
            } else {
                message.warning('没有内容');
    
            }
    
        };

*  通过组件获取复制的文字（如果页面中有多处复制，那么放到app.js的componentDidMount 组件内）

import * as ClipboardJS from 'clipboard'
    componentDidMount () {
            // 创建复制文字实例
            var clipboard = new ClipboardJS('#copytext');
            clipboard.on('success', function (e) {
                message.success('复制成功！');
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                message.warning('复制失败，请手动复制！');
            });
        };
    
    
    <div style={
       {backgroundColor:'#eeefff',height:60,padding:5}}>
                            <div>回复：<span id="replyFeedContent">{item.reply}</span></div>
                            <div style={
       {marginRight:10,cursor: 'pointer'}} data-clipboard-text={item.reply}>
                                <Icon type="copy" style={
       { color:'#666',fontSize: 13,marginRight: 5}} />
                                <span style={
       {color:'#666',fontSize: 13}}>复制</span>
                            </div>
                        </div>

*  reactnative复制文字

引入

import { Clipboard, } from 'react-native';

onCopy = (content) => {
             //清空粘贴板
             Clipboard.setString(null)
             //设置粘贴板文案
             Clipboard.setString(content)
             //获取粘贴板文案
             Clipboard.getString().then(oldVal => {
                 if (oldVal == content) {
                    toast("复制成功！");
                 }
             })
        };