外置按钮将echarts图表导出为png与svg格式
两个文字类型的按钮,分别导出PNG与SVG格式。官方默认只能导出png或者jpg,且是在toolbox组件内按钮导出。显示用的是Vue+ElementUI,不过这些不重要。<div class="output"><span>图表导出:</span><el-link class="outputbutton" type="info" @click="outpu
·
两个文字类型的按钮,分别导出PNG与SVG格式。官方默认只能导出png或者jpg,且是在toolbox组件内按钮导出。
显示用的是Vue+ElementUI,不过这些不重要。
<div class="output">
<span>图表导出:</span>
<el-link class="outputbutton" type="info" @click="output('PNG')">PNG</el-link>
<el-link class="outputbutton" type="info" @click="output('SVG')">SVG</el-link>
</div>
对应的方法(核心代码)
// 图片导出
output(type) {
// this.chartObject存的是echarts实例
if(this.chartObject){
// echarts官网文档实例方法getDataURL
let picInfo = this.chartObject.getDataURL({
type: 'png',
pixelRatio: 1.5, // 放大两倍下载。解决生成图片在移动端模糊问题
backgroundColor: '#fff',
excludeComponents: ['toolbox'] // 导出时忽略toolbox组件
});// 获取到的是一串base64信息
if(type == 'PNG'){
const elink = document.createElement('a');
// 设置默认文件名,this.chartTitle为绘图时生成的标题
elink.download = this.chartTitle + ".png";
elink.style.display = 'none';
elink.href = picInfo;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
else if(type == 'SVG'){
let mycanvas = document.querySelector('#' + this.id + ' canvas');
//设置svg标签属性
let svg0 = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg0.setAttribute('version', '1.1');
svg0.setAttribute('height', mycanvas.height);
svg0.setAttribute('width', mycanvas.width);
let img3 = document.createElementNS('http://www.w3.org/2000/svg','image');
// base64编码写入href
img3.href.baseVal = picInfo;
img3.setAttribute('height', mycanvas.height);
svg0.appendChild(img3);
let h = svg0.outerHTML;
//给图片对象写入base64编码的svg流
let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)));
const elink = document.createElement('a');
// 设置默认文件名,this.chartTitle为绘图时生成的标题
elink.download = this.chartTitle + ".svg";
elink.style.display = 'none';
elink.href = data;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
}
}
else{
this.$message({
message: '暂未绘制图表,请先绘制图表',
type: 'error'
});
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)