下载图片
先看看效果图
其实就是运用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,一起成长