echart生成報表並生成可下載PDF
阿新 • • 發佈：2018-12-02
Echarts
一個純javascript的圖表庫,而且Echart3開始不再強制使用AMD的方式按需引入,程式碼立也不再內建AMD載入器,只需要像普通的javaScript庫一樣用script標籤引入.
文件和下載地址: echarts
html2canvas
允許直接在使用者瀏覽器上擷取網頁或部分網頁的“螢幕截圖”。螢幕截圖基於DOM，因此它可能不是真實表示的100％準確，因為它沒有製作實際的螢幕截圖，而是根據頁面上可用的資訊構建螢幕截圖.
文件和下載地址: htm2canvas
jspdf
使用javascript生成pdf的類庫.jsPDF支援不同型別的PDF檔案格式，包括：文字，數字，圖形，圖片，同時你可以自由的編輯標題或者其它型別元素。支援互動的內容製作，例如，你可以輸入文字或者數字，然後jsPDF幫助生成最後的PDF內容.
文件和下載地址: jspd
簡單示例demo
1.在專案中建立如下目錄 weabapp/resources/myJs,然後將下載的js檔案copy至此目錄.
2.在html頁面引入js
<script src="${base.contextPath}/resources/myJs/echarts.js"></script> <script src="${base.contextPath}/resources/myJs/html2canvas.min.js"></script> <script src="${base.contextPath}/resources/myJs/jspdf.min.js"></script>
3.從後臺獲取資料,並初始化echarts例項
**初始化echarts例項**
<div id="mEcharts" style="width: 600px;height:400px;"></div> <!-- 柱狀圖div --> <div id="chartCircular" style="width: 600px;height:400px;"></div> <!-- 餅狀圖div --> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart ; var chartCircular $(function(){ myChart = echarts.init(document.getElementById('mEcharts')); chartCircular = echarts.init(document.getElementById('chartCircular')); });
後臺獲取資料並組裝成生成圖表需要的型別,並顯示圖表
function reprot(){
var productName=new Array();//柱圖-資料
var amount=new Array();//柱圖-資料
var nameAmountArr=new Array();//餅圖資料
$.ajax({
url: '${base.contextPath}/fs/goods/info/selectCountByProId',
success: function (args) {
var i=args.rows.length;
var name="";
var value="";
for(var i=0;i<args.rows.length;i++){
var a0 = args.rows[i] || {};
var nameAount="";
for (var k in a0) {
if("productName"==k){
productName.push(a0[k]);
name=a0[k];
}
if("nowAmount"==k){
amount.push(a0[k]);
value=a0[k];
}
}
nameAmout= {value:value, name:name};
nameAmountArr.push(nameAmout);
name="";
value="";
}
// 指定圖表的配置項和資料
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '各個供應商所有商品現有庫存'
},
tooltip: {},
legend: {
data:['庫存']
},
xAxis: {
data: productName
},
yAxis: {},
series: [{
name: '庫存',
type: 'bar',
data: amount
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
//下面的程式碼是在生成圖表之後顯示生成pdf的下載按鈕
var div = '<span class="btn btn-success k-grid-save-changes" onclick="convertCanvasToImage()">柱狀圖下載</span>'
$("#down").append(div);
//餅狀圖
chartCircularOption = {
title : {
text: '各個供應商所有商品的現有庫存',
subtext: '現有庫存',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: productName
},
series : [
{
name: '現有庫存',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:nameAmountArr,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
chartCircular.setOption(chartCircularOption);
}
});
}
下面是生成PDF的程式碼
function convertCanvasToImage() {
html2canvas(document.getElementById('mEcharts'), {
onrendered: function(canvas) {
//document.body.appendChild(canvas);
createPDFObject(canvas.toDataURL("image/jpeg"));
}
});
}
function createPDFObject(imgData) {
debugger;
var name="柱狀圖";
var doc = new jsPDF('p', 'pt');
doc.addImage(imgData, 5, 5, 600, 300, 'img');
doc.save(''+name+'.pdf')
}
注意:需要設定圖表背景色為白色,否則生成的PDF會是黑色背景，如下設定
var option = {
backgroundColor: '#FFFFFF',
title: {
text: '各個供應商所有商品現有庫存'
},