zoukankan      html  css  js  c++  java
  • react中运用event事件触发子元素<a>标签进行下载

    import React, { Component } from 'react'
    import { Button } from 'antd'
    
    class test extends Component {
        constructer(props) {
          super(props)
          this.state= {
           downUrl: '',
          }
        this.checkFiles = this.checkFiles.bind(this)
        this.downClick = this.downClick.bind(this)
        }
        
       checkFiles(event) {
        event.persist() // 为了支持异步回掉后对event事件的继续引用
        this.setState({ downUrl: res.url }, () => 
        event.target.children[1] && event.target.children[1].click())
        }
       // 阻止a标签向上冒泡
       downClick(event) {
        event.stopPropagation()
        }
    
       render() {
        const { downUrl } = this.state
         return(
          <Button onClick={this.checkFiles}>下载<a href={downUrl} download onClick={this.downClick}></a></Button>
          )
       }
    } 

     或者自己生成一个<a>标签直接点击下载:

    const a = document.createElement('a')
    a.setAttribute('download', '')
    a.setAttribute('href', ‘')
    a.click()

    注:只有 Firefox 和 Chrome 支持 <a>标签的download 属性,如果想兼容其他浏览器,请用<form>

  • 相关阅读:
    lintcode:数字三角形
    lintcode:Search Insert Position 搜索插入位置
    lintcode:搜索二维矩阵II
    lintcode :搜索二维矩阵
    Linux du命令详解
    Linux df命令详解
    Linux date命令详解
    Linux tcpdump命令详解
    Linux挂载共享命令
    Linux scp命令详解
  • 原文地址:https://www.cnblogs.com/xiaoxiao666/p/8334342.html
Copyright © 2011-2022 走看看