本篇内容介绍了“echarts图表如何导出到excel中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
<div>
<button onclick="export1()" value="导出">导出</button> </div>
<div id="app" >
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/echarts.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('app'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量','销售额']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子"]
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20,100]
},
{
name: '销售额',
type: 'bar',
data: [50, 200, 360, 100, 100, 200,1000]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
/**
* 导出excel中
*/
function export1() {
//获取echarts图片的base64编码字符串 pixelRatio:图片精度 backgroundColor:背景颜色
let imgURL=myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
//后台请求:传递图表base64编码字符串
axios.post("/export.do",{'imagesBase64':imgURL}).then((res)=>{
if(res.data.flag){
//根据返回路径下载文件
window.location.href=res.data.message;
}else{
alert("导出出错")
}
})
}
注:请求也可以转成ajax,此处使用axios
注:后端使用springmvc+poi
@PostMapping("export")
public Result ex(@RequestBody Map<String,String> map,HttpServletRequest request){
//创建工作簿
XSSFWorkbook workbook = new XSSFWorkbook();
//工作表
XSSFSheet sheet = workbook.createSheet("echarts图表");
//获取前端图片base64编码
String base64 = map.get("imagesBase64");
//去掉标识22位,解码
byte[] img=decode(base64.substring(22));
//在工作表中画图
XSSFDrawing xssfDrawing = sheet.createDrawingPatriarch();
//画图位置,前四个参数: 单元格位置,距离left,top,right,bottom的像素距离,
//后四个参数是: 前两个表示 左上角 列号、行号, 右下角 列号、行号
XSSFClientAnchor clientAnchor=new XSSFClientAnchor(0,0,0,0,0,0,10,20);
//根据指定位置来画图
xssfDrawing.createPicture(clientAnchor,workbook.addPicture(img,XSSFWorkbook.PICTURE_TYPE_PNG));
//获取模板位置
String templatesPath = request.getSession().getServletContext().getRealPath("templates")+File.separator+"haha.xlsx";
File file = new File(templatesPath);
if(file.exists()){
file.delete();
}
//输出到模板中
BufferedOutputStream out=null;
try {
out=new BufferedOutputStream(new FileOutputStream(templatesPath));
workbook.write(out);
out.flush();
}catch (Exception e){
e.printStackTrace();
return Result.fail("导出失败");
}finally {
//释放资源
try {
if(out!=null){
out.close();
}
if(workbook!=null){
workbook.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
//返回模板位置
String s = request.getContextPath() + File.separator + "templates" + File.separator + "haha.xlsx";
return Result.success(s);
}
“echarts图表如何导出到excel中”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/585635/blog/4559131