利用a标签下载图片

下载图片

先看看效果图

其实就是运用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，一起成长