利用a标签下载图片

悠悠 2023-02-28 06:08 1阅读 0赞

## 下载图片 ##

先看看效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]

**其实就是运用a标签的download属性，href就是图片的地址**

import React, {  useState } from 'react'
    
    import './index.scss'
    import fly from '../../api/flyio'
    
    
    /** * type, 7：职位详情的分享 */
    export default ({  userInfomation = { }, type, isVisible, handleToggleLayer, jobid = '', jobName = '' }) => { 
      const [tabType, setTabType] = useState(2)
      const tenantId = localStorage.getItem('tenantId')
      return <div className={ `layer-container ${ isVisible ? '' : 'isHidden'}`}>
        { 
          type === 7 ?
            <div className='layer-content time-layer'>
              <div className='time-layer-top border-bo'>
                <div className='top-left'>
                  <div className='top-item active-txt' onClick={ () => setTabType(2)}>
                    <span>二维码分享</span>
                    <i />
                  </div>
                </div>
                <div className='close-time-img iconfont iconpopup-close-bt' onClick={ () => handleToggleLayer(false)} />
              </div>
              <div className='share-item'>
                    <div className='middel-layer mini-layer'>
                      <h4>分享职位：{ jobName}</h4>
                      <img src={ `${ fly.config.baseURL}/open_api/getQRcode?jobId=${ jobid}&tenantId=${ tenantId}&referrer=${ userInfomation.passid}`} alt='二维码' className='mini-program' />
                      <p>将二维码分享给好友，对方微信扫一扫即可打开职位</p>
                    </div>
                    <div className='share-bottom-btn'>
                      <span className='cancle-btn' onClick={ () => handleToggleLayer(false)}>取消</span>
                      <a className='download-btn' href={ `${ fly.config.baseURL}/open_api/getQRcode?jobId=${ jobid}&tenantId=${ tenantId}&referrer=${ userInfomation.passid}`} download='miniprogram.jpg'>下载二维码</a>
                    </div>
                  </div>
              }
            </div> 
      </div>
    }
    
      );
    };

### 公众号 ###

欢迎大家关注我的公众号： 石马上coding，一起成长  
![石马上coding][coding]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20230209/d701d02686da4325a31d41e9ce071b73.png
[coding]: /images/20230209/8616b7e7d33c4e37b6e7092aa5c06fdd.png