- 需求:点击自己写的下载按钮,下载echart提供的图片
- 代码
<el-button style="margin-left:10px;" type="primary" plain @click="saveImgae" >导出</el-button>
<div class="z-echartbox" style="height:50vh;width:100%">
<div class="z-echart" style="height:50vh;width:100%" ref="online"></div>
</div>
const online = ref(null)
const saveImgae = ()=>{
let picInfo = online.value.getDataURL({
type: 'png',
pixelRatio: 1.5,
backgroundColor: '#fff'
});
const elink = document.createElement('a');
elink.download = `xxxxx-${moment().format('YYYY-MM-DD HH:mm:ss')}`;
elink.style.display = 'none';
elink.href = picInfo;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink)
}
toolbox: {
feature: {
saveAsImage: {show: false, title: '保存截图', type: 'png'}
},
},