打印echarts图表
场景描述
将echarts图表导出到pdf，如图所示
实现思路
- 使用echarts的getDataURL方法获得图表的图片的Base64编码
- 使用打印组件打印echarts的图片
实现步骤
1. 获得图表的图片的Base64编码
echarts提供getDataURL方法，导出图表图片，返回一个 base64 的 URL，可以设置为Image的src
获取图表组件的echarts实例，调用getDataURL方法，获得图片的Base64编码
//获取图表组件的echarts实例
let myChart = this.comp("chart0").echartsInstance;
//调用getDataURL方法，返回图片的Base64编码
let picInfo = myChart.getDataURL({
type: "png",
pixelRatio: 1.5,
backgroundColor: "white"
});
添加自定义数据（给打印组件使用），增加pic列，用于存储图片的Base64编码
this.comp("tableCustomData0").setValue("pic",picInfo);
2. 使用打印组件打印图片
在页面上添加打印组件，在代码中添加打印组件的模板文件，本例在UI2/pcx目录下新建chart.print.tpl文件，打印组件的使用方法参考打印组件文档
在打印组件的附加数据属性中，选中自定义数据
在打印模板中，使用 context.datas.data组件id 访问附加数据，data组件id.[0].colName表示第一行colName列的数据。本例自定义数据组件的id为tableCustomData0，列名为pic，代码如下
<style type="text/css">
.Image > img{
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
</style>
<div class="Image">
<img src="{{context.datas.tableCustomData0.[0].pic}}"/>
</div>
3. 本例完整代码
js代码如下
onButton0Click(event){
//获取图表组件的echarts实例
let myChart = this.comp("chart0").echartsInstance;
//调用getDataURL方法，返回图片的Base64编码
let picInfo = myChart.getDataURL({
type: "png",
pixelRatio: 1.5,
backgroundColor: "white"
});
//存入自定义数据
this.comp("tableCustomData0").setValue("pic",picInfo);
//调用打印组件的打印方法
this.comp("print0").print();
}
打印模板如下
<html>
<head>
<meta charset="UTF-8">
<title>统计图表</title>
<style type="text/css">
.head{
}
.footer {
}
.table {
border: 1px solid #dddddd;
}
.print-item{
display: table-row;
page-break-inside: avoid;
}
.print-item > .print-item-label,
.print-item > .print-item-value{
border: 1px solid #dddddd;
padding: 8px;
display: table-cell;
text-align: center;
}
.print-item > .print-item-label{
width: 30%;
vertical-align: middle;
}
.table{
padding: 0;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
.printer,.print-date{
padding-left: 60%;
}
.Image > img{
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
</style>
</head>
<body style="margin: 28px;">
<div class="head">
<h1 class="title">统计图表</h1>
</div>
<div class='print-item String'>
<div class="Image">
<img src="{{context.datas.tableCustomData0.[0].pic}}"/>
</div>
<div class="table">
<div class='print-item String'>
<div class='print-item-label'>供应商</div>
<div class='print-item-value'>数量</div>
</div>
{{#each data}}
<div class='print-item String'>
<div class='print-item-label'>{{{fgongyings}}}</div>
<div class='print-item-value'>{{{fshuoliang}}}</div>
</div>
{{/each}}
</div>
<div class="footer">
<h4 class="printer">打印人：{{context.printer}}</h4>
<h4 class="print-date">打印时间：{{context.printDate}}</h4>
</div>
</body>
</html>