react中实现复制(react-copy-to-clipboard插件)、下载

1.复制

复制需要下载一个插件

npm install --save react-copy-to-clipboard

主要代码

import React, {
      Component, Fragment } from 'react';
import {
      CopyToClipboard } from 'react-copy-to-clipboard';

class Copy Component {
     
	state:{
     
		msg:'111'
	};
	copy=()=>{
     }
	render() {
     
        return (
			<Fragment>
				<CopyToClipboard
                    text={
     this.state.msg}	//点击复制时的内容,可自行设置或传入
                    onCopy={
     this.copy}		//点击之后的回调
                >
                    <button key="copy">复制</button>
                </CopyToClipboard>
			</Fragment>
		)
    }
}
export default Copy

2.下载

主要代码

download = () => {
     
    var element = document.createElement('a');
    var file = new Blob(
        [document.getElementsByClassName('name')[0].innerHTML],//下载的内容
        {
     
            type: 'text/plain'
        }
    );
    element.href = URL.createObjectURL(file);
    element.download = '下载.txt';
    element.click();
};
<button key="download" onClick={
     this.download}>
    下载
</button>