运用jquery做打印和导出操作
我最近接手的项目中经常让做出打印和导出统计图和表格
首先说打印，打印如果用echarts做出来的图表，打印的时候，要借助jquery的打印插件。
打印插件：
1 <script src="../Plugin/jquery-print/jquery.jqprint-0.3.js"></script>
然后进行打印操作
1 <div id="printPopup" class="modal-block mfp-hide"> 2 <section class="panel"> 3 <header class="panel-heading"> 4 <h2 class="panel-title">数据打印</h2> 5 </header> 6 <div class="panel-body"> 7 <div class="modal-wrapper"> 8 <div class="modal-text"> 9 <div class="form-group"> 10 <label class="col-xs-12 col-md-3 control-label">统计数据：</label> 11 <div class="col-xs-12 col-md-9"> 12 <select class="form-control mb-md printTableData"> 13 <option value="0">请选择数据表格</option> 14 <option data-id="" value="1">招商引资项目汇总统计表</option> 15 <option data-id="" value="2">新签招商引资项目汇总统计表</option> 16 <option data-id="" value="3">在陕投资合同项目汇总表</option> 17 <option data-id="" value="4">在陕投资合同项目分类表（按地域）</option> 18 <option data-id="" value="5">在陕投资合同项目分类表（按行业）</option> 19 <option data-id="" value="6">招商引资项目明细统计表</option> 20 </select> 21 <label for="fullname" class="errorHide"></label> 22 </div> 23 </div> 24 </div> 25 </div> 26 </div> 27 <footer class="panel-footer"> 28 <div class="row"> 29 <div class="col-md-12 text-right"> 30 <button type="button" class="btn btn-default popupCancel">取消</button> 31 <button type="button" id="printConfirm" class="btn btn-primary"><i class="fa fa-check"></i>确定</button> 32 </div> 33 </div> 34 </footer> 35 </section> 36 </div>
打印js:
1 //触发打印弹窗 2 function printDatable() { 3 $(".pintTable").click(function () { 4 //打印弹窗初始化 5 printLizationVal(); 6 //打印初始化事件 7 printFuntion(); 8 confirmPopup("#printPopup", "inline"); 9 $("#printConfirm").click(function () { 10 if (tableEven($(".printTableData"), "请选择打印的数据表格")) { 11 if ($(".printTableData").val() == "1" || $(".printTableData").val() == 1) { 12 $(".printDtable").show(); 13 $("#Company").show(); 14 $("#navTabes").hide(); 15 $("#headerTable").hide(); 16 $.magnificPopup.close(); 17 html2canvas($("#CompanyChart"), { 18 onrendered: function (canvas) { 19 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 20 $("#CompanyChart").html("<img src='" + domImg + "'/>"); 21 } 22 }); 23 } 24 if ($(".printTableData").val() == "2" || $(".printTableData").val() == 2) { 25 $("#navTabes").hide(); 26 $(".printDtable").show(); 27 $("#headerTable").hide(); 28 $("#Company").hide(); 29 $("#NCompany").show(); 30 $.magnificPopup.close(); 31 html2canvas($("#NCompanyChart"), { 32 onrendered: function (canvas) { 33 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 34 $("#NCompanyChart").html("<img src='" + domImg + "'/>"); 35 } 36 }); 37 } 38 if ($(".printTableData").val() == "3" || $(".printTableData").val() == 3) { 39 $(".printDtable").show(); 40 $("#headerTable").hide(); 41 $("#navTabes").hide(); 42 $("#Company").hide(); 43 $("#SCompany").show(); 44 $.magnificPopup.close(); 45 html2canvas($("#SCompanyChart"), { 46 onrendered: function (canvas) { 47 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 48 $("#SCompanyChart").html("<img src='" + domImg + "'/>"); 49 } 50 }); 51 } 52 if ($(".printTableData").val() == "4" || $(".printTableData").val() == 4) { 53 $(".printDtable").show(); 54 $("#headerTable").hide(); 55 $("#navTabes").hide(); 56 $("#Company").hide(); 57 $("#AddSCompany").show(); 58 $.magnificPopup.close(); 59 html2canvas($("#AddSCompanyChart"), { 60 onrendered: function (canvas) { 61 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 62 $("#AddSCompanyChart").html("<img src='" + domImg + "'/>"); 63 } 64 }); 65 } 66 if ($(".printTableData").val() == "5" || $(".printTableData").val() == 5) { 67 $(".printDtable").show(); 68 $("#headerTable").hide(); 69 $("#navTabes").hide(); 70 $("#Company").hide(); 71 $("#HYSCompany").show(); 72 $.magnificPopup.close(); 73 html2canvas($("#HYSCompanyChart"), { 74 onrendered: function (canvas) { 75 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 76 $("#HYSCompanyChart").html("<img src='" + domImg + "'/>"); 77 } 78 }); 79 } 80 if ($(".printTableData").val() == "6" || $(".printTableData").val() == 6) { 81 $(".printDtable").show(); 82 $("#headerTable").hide(); 83 $("#navTabes").hide(); 84 $("#Company").hide(); 85 $("#SureCompany").show(); 86 $.magnificPopup.close(); 87 html2canvas($("#SureCompanyChart"), { 88 onrendered: function (canvas) { 89 var domImg = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src'); 90 $("#SureCompanyChart").html("<img src='" + domImg + "'/>"); 91 } 92 }); 93 } 94 } else { 95 tableEven($(".printTableData"), "请选择打印的数据表格"); 96 } 97 }) 98 }) 99 100 } 101 //打印弹窗初始化 102 function printLizationVal() { 103 //初始化默认样式 104 $("#printPopup").find(".has-error").removeClass(); 105 $("#printPopup").find(".error").removeClass().text(""); 106 $(".printTableData").val("0"); 107 } 108 //打印初始化事件 109 function printFuntion() { 110 $(".printTableData").change(function () { 111 tableEven($(".printTableData"), "请选择打印的数据表格"); 112 }) 113 } 114 //打印页面上的内容 115 function preview() { 116 $(".printBtn").unbind("click").click(function () { 117 $(".printDtable").hide(); 118 $("#tabContDiv").jqprint(); 119 }) 120 }
导出html：
1 <div id="exportPopup" class="modal-block mfp-hide"> 2 <section class="panel"> 3 <header class="panel-heading"> 4 <h2 class="panel-title">数据导出</h2> 5 </header> 6 <div class="panel-body"> 7 <div class="modal-wrapper"> 8 <div class="modal-text"> 9 <div class="form-group"> 10 <label class="col-xs-12 col-md-3 control-label">统计数据：</label> 11 <div class="col-xs-12 col-md-9"> 12 <select class="form-control mb-md exportTableData"> 13 <option value="0">请选择数据表格</option> 14 <option data-id="" value="1">招商引资项目汇总统计表</option> 15 </select> 16 <label for="fullname" class="errorHide"></label> 17 </div> 18 </div> 19 </div> 20 </div> 21 </div>
导出js:
1 function exportPopupTable() { 2 //导出1图 3 $("#exportTable").click(function () { 4 //初始化筛选框 5 exportLizationVal(); 6 //事件初始化 7 exportFuntion(); 8 confirmPopup("#exportPopup", "inline"); 9 //提交ajax 10 $(".exportConfirm1").click(function () { 11 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 12 $.ajax({ 13 "url": "MasterHandler/MasterProjectImplementSts.ashx", 14 "data": { 15 "handleType": "exportSummaryStatistics", 16 //开始时间签约时间 17 "startTime": $.trim($("#datepicker").find(".startTime").val()), 18 //结束时间签约时间 19 "endTime": $.trim($("#datepicker").find(".endTime").val()), 20 //企业类型 21 "enterpriseTypeId": $.trim($("#tu1").find(".EnterpriseTypeId").val()), 22 //投资金额 23 "projectInvested": $.trim($("#tu1").find("registeredAssetsHeader").val()), 24 //累计金额 25 "projectScheduleFundsPlace": $.trim($("#tu1").find(".registeredAssets").val()), 26 //投资来源地 27 "cityId": $.trim($("#tu1").find(".cityDataHeader").val()), 28 //招商引资活动 29 "projectActivitiesId": $.trim($("#tu1").find(".SelectProjectActivitiesId").val()), 30 //项目主管部门 31 "UserDeparmentList": $.trim($("#tu1").find(".SalesDepartment").val()), 32 //投资企业性质 33 "enterpriseNatureIdd": $.trim($("#tu1").find(".enterseProperty").val()), 34 }, 35 "type": "post", 36 "cache": false, 37 "async": false, 38 "dataType": "json", 39 "success": function (data) { 40 if (data.msg == 1 || data == "1") { 41 confirmPopupClose(); 42 new PNotify({ 43 title: '系统温馨提示', 44 text: '导出成功！', 45 type: 'success' 46 }); 47 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 48 } else { 49 new PNotify({ 50 title: '系统温馨提示', 51 text: data.msgbox, 52 type: 'error' 53 }); 54 } 55 56 }, 57 "error": function () { 58 new PNotify({ 59 title: '系统温馨提示', 60 text: '系统异常，请稍后重试。', 61 }); 62 } 63 }); 64 } else { 65 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 66 } 67 }) 68 }); 69 //导出2图 70 $("#exportTable2").click(function () { 71 //初始化筛选框 72 exportLizationVal(); 73 //事件初始化 74 exportFuntion(); 75 confirmPopup("#exportPopup2", "inline"); 76 //提交ajax 77 $(".exportConfirm2").click(function () { 78 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 79 $.ajax({ 80 "url": "MasterHandler/MasterProjectImplementSts.ashx", 81 "data": { 82 "handleType": "exportNewlySignedProjectSummaryTable", 83 //所属产业 84 "industryTypeFatherId": $.trim($("#tu2").find(".CelebrityIndustryId").val()), 85 //行业 86 "industryTypeId": $.trim($("#tu2").find(".CIndustryId").val()), 87 //开始时间签约时间 88 "startTime": $.trim($("#datepicker").find(".startTime").val()), 89 //结束时间签约时间 90 "endTime": $.trim($("#datepicker").find(".endTime").val()), 91 //企业类型 92 "enterpriseTypeId": $.trim($("#tu2").find(".EnterpriseTypeId").val()), 93 //投资金额 94 "projectInvested": $.trim($("#tu2").find("registeredAssetsHeader").val()), 95 //累计金额 96 "projectScheduleFundsPlace": $.trim($("#tu2").find(".registeredAssets").val()), 97 //投资来源地 98 "cityId": $.trim($("#tu2").find(".cityDataHeader").val()), 99 //招商引资活动 100 "projectActivitiesId": $.trim($("#tu2").find(".SelectProjectActivitiesId").val()), 101 //项目主管部门 102 "UserDeparmentList": $.trim($("#tu2").find(".SalesDepartment").val()), 103 //投资企业性质 104 "enterpriseNatureIdd": $.trim($("#tu2").find(".enterseProperty").val()), 105 //项目类型 106 "isNotProvince": $.trim($("#tu2").find(".Projectypes").val()), 107 }, 108 "type": "post", 109 "cache": false, 110 "async": false, 111 "dataType": "json", 112 "success": function (data) { 113 if (data.msg == 1 || data == "1") { 114 confirmPopupClose(); 115 new PNotify({ 116 title: '系统温馨提示', 117 text: '导出成功！', 118 type: 'success' 119 }); 120 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 121 } else { 122 new PNotify({ 123 title: '系统温馨提示', 124 text: data.msgbox, 125 type: 'error' 126 }); 127 } 128 129 }, 130 "error": function () { 131 new PNotify({ 132 title: '系统温馨提示', 133 text: '系统异常，请稍后重试。', 134 }); 135 } 136 }); 137 } else { 138 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 139 } 140 }) 141 }); 142 //导出3图 143 $("#exportTable3").click(function () { 144 //初始化筛选框 145 exportLizationVal(); 146 //事件初始化 147 exportFuntion(); 148 confirmPopup("#exportPopup3", "inline"); 149 //提交ajax 150 $(".exportConfirm3").click(function () { 151 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 152 $.ajax({ 153 "url": "MasterHandler/MasterProjectImplementSts.ashx", 154 "data": { 155 "handleType": "exportInvestmentProjectsProvinceTable", 156 //所属产业 157 "industryTypeFatherId": $.trim($("#tu3").find(".CelebrityIndustryId").val()), 158 //行业 159 "industryTypeId": $.trim($("#tu3").find(".CIndustryId").val()), 160 //开始时间签约时间 161 "startTime": $.trim($("#datepicker").find(".startTime").val()), 162 //结束时间签约时间 163 "endTime": $.trim($("#datepicker").find(".endTime").val()), 164 //企业类型 165 "enterpriseTypeId": $.trim($("#tu3").find(".EnterpriseTypeId").val()), 166 //投资金额 167 "projectInvested": $.trim($("#tu3").find("registeredAssetsHeader").val()), 168 //累计金额 169 "projectScheduleFundsPlace": $.trim($("#tu3").find(".registeredAssets").val()), 170 //投资来源地 171 "cityId": $.trim($("#tu3").find(".cityDataHeader").val()), 172 //招商引资活动 173 "projectActivitiesId": $.trim($("#tu3").find(".SelectProjectActivitiesId").val()), 174 //项目主管部门 175 "UserDeparmentList": $.trim($("#tu3").find(".SalesDepartment").val()), 176 //投资企业性质 177 "enterpriseNatureIdd": $.trim($("#tu3").find(".enterseProperty").val()), 178 //项目类型 179 "isNotProvince": $.trim($("#tu3").find(".Projectypes").val()), 180 }, 181 "type": "post", 182 "cache": false, 183 "async": false, 184 "dataType": "json", 185 "success": function (data) { 186 if (data.msg == 1 || data == "1") { 187 confirmPopupClose(); 188 new PNotify({ 189 title: '系统温馨提示', 190 text: '导出成功！', 191 type: 'success' 192 }); 193 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 194 } else { 195 new PNotify({ 196 title: '系统温馨提示', 197 text: data.msgbox, 198 type: 'error' 199 }); 200 } 201 202 }, 203 "error": function () { 204 new PNotify({ 205 title: '系统温馨提示', 206 text: '系统异常，请稍后重试。', 207 }); 208 } 209 }); 210 } else { 211 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 212 } 213 }) 214 }); 215 //导出4图 216 $("#exportTable4").click(function () { 217 //初始化筛选框 218 exportLizationVal(); 219 //事件初始化 220 exportFuntion(); 221 confirmPopup("#exportPopup4", "inline"); 222 //提交ajax 223 $(".exportConfirm4").click(function () { 224 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 225 $.ajax({ 226 "url": "MasterHandler/MasterProjectImplementSts.ashx", 227 "data": { 228 "handleType": "exportInvestmentProjectsClassification", 229 //所属产业 230 "industryTypeFatherId": $.trim($("#tu4").find(".CelebrityIndustryId").val()), 231 //行业 232 "industryTypeId": $.trim($("#tu4").find(".CIndustryId").val()), 233 //开始时间签约时间 234 "startTime": $.trim($("#datepicker").find(".startTime").val()), 235 //结束时间签约时间 236 "endTime": $.trim($("#datepicker").find(".endTime").val()), 237 //企业类型 238 "enterpriseTypeId": $.trim($("#tu4").find(".EnterpriseTypeId").val()), 239 //投资金额 240 "projectInvested": $.trim($("#tu4").find("registeredAssetsHeader").val()), 241 //累计金额 242 "projectScheduleFundsPlace": $.trim($("#tu4").find(".registeredAssets").val()), 243 //投资来源地 244 "cityId": $.trim($("#tu4").find(".cityDataHeader").val()), 245 //招商引资活动 246 "projectActivitiesId": $.trim($("#tu4").find(".SelectProjectActivitiesId").val()), 247 //项目主管部门 248 "UserDeparmentList": $.trim($("#tu4").find(".SalesDepartment").val()), 249 //投资企业性质 250 "enterpriseNatureIdd": $.trim($("#tu4").find(".enterseProperty").val()), 251 //项目类型 252 "isNotProvince": $.trim($("#tu4").find(".Projectypes").val()), 253 }, 254 "type": "post", 255 "cache": false, 256 "async": false, 257 "dataType": "json", 258 "success": function (data) { 259 if (data.msg == 1 || data == "1") { 260 confirmPopupClose(); 261 new PNotify({ 262 title: '系统温馨提示', 263 text: '导出成功！', 264 type: 'success' 265 }); 266 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 267 } else { 268 new PNotify({ 269 title: '系统温馨提示', 270 text: data.msgbox, 271 type: 'error' 272 }); 273 } 274 275 }, 276 "error": function () { 277 new PNotify({ 278 title: '系统温馨提示', 279 text: '系统异常，请稍后重试。', 280 }); 281 } 282 }); 283 } else { 284 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 285 } 286 }) 287 }); 288 //导出5图 289 $("#exportTable5").click(function () { 290 //初始化筛选框 291 exportLizationVal(); 292 //事件初始化 293 exportFuntion(); 294 confirmPopup("#exportPopup5", "inline"); 295 //提交ajax 296 $(".exportConfirm5").click(function () { 297 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 298 $.ajax({ 299 "url": "MasterHandler/MasterProjectImplementSts.ashx", 300 "data": { 301 "handleType": "exportInvestmentProjectsIndustry", 302 //所属产业 303 "industryTypeFatherId": $.trim($("#tu5").find(".CelebrityIndustryId").val()), 304 //行业 305 "industryTypeId": $.trim($("#tu5").find(".CIndustryId").val()), 306 //开始时间签约时间 307 "startTime": $.trim($("#datepicker").find(".startTime").val()), 308 //结束时间签约时间 309 "endTime": $.trim($("#datepicker").find(".endTime").val()), 310 //企业类型 311 "enterpriseTypeId": $.trim($("#tu5").find(".EnterpriseTypeId").val()), 312 //投资金额 313 "projectInvested": $.trim($("#tu5").find("registeredAssetsHeader").val()), 314 //累计金额 315 "projectScheduleFundsPlace": $.trim($("#tu5").find(".registeredAssets").val()), 316 //投资来源地 317 "cityId": $.trim($("#tu5").find(".cityDataHeader").val()), 318 //招商引资活动 319 "projectActivitiesId": $.trim($("#tu5").find(".SelectProjectActivitiesId").val()), 320 //项目主管部门 321 "UserDeparmentList": $.trim($("#tu5").find(".SalesDepartment").val()), 322 //投资企业性质 323 "enterpriseNatureIdd": $.trim($("#tu5").find(".enterseProperty").val()), 324 //项目类型 325 "isNotProvince": $.trim($("#tu5").find(".Projectypes").val()), 326 }, 327 "type": "post", 328 "cache": false, 329 "async": false, 330 "dataType": "json", 331 "success": function (data) { 332 if (data.msg == 1 || data == "1") { 333 confirmPopupClose(); 334 new PNotify({ 335 title: '系统温馨提示', 336 text: '导出成功！', 337 type: 'success' 338 }); 339 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 340 } else { 341 new PNotify({ 342 title: '系统温馨提示', 343 text: data.msgbox, 344 type: 'error' 345 }); 346 } 347 348 }, 349 "error": function () { 350 new PNotify({ 351 title: '系统温馨提示', 352 text: '系统异常，请稍后重试。', 353 }); 354 } 355 }); 356 } else { 357 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 358 } 359 }) 360 }); 361 //导出6图 362 $("#exportTable6").click(function () { 363 //初始化筛选框 364 exportLizationVal(); 365 //事件初始化 366 exportFuntion(); 367 confirmPopup("#exportPopup6", "inline"); 368 //提交ajax 369 $(".exportConfirm6").click(function () { 370 if (tableEven($(".exportTableData"), "请选择要导出的数据表格！")) { 371 $.ajax({ 372 "url": "MasterHandler/MasterProjectImplementSts.ashx", 373 "data": { 374 "handleType": "exportInvestmentProject", 375 //所属产业 376 "industryTypeFatherId": $.trim($("#tu6").find(".CelebrityIndustryId").val()), 377 //行业 378 "industryTypeId": $.trim($("#tu6").find(".CIndustryId").val()), 379 //开始时间签约时间 380 "startTime": $.trim($("#datepicker").find(".startTime").val()), 381 //结束时间签约时间 382 "endTime": $.trim($("#datepicker").find(".endTime").val()), 383 //企业类型 384 "enterpriseTypeId": $.trim($("#tu6").find(".EnterpriseTypeId").val()), 385 //投资金额 386 "projectInvested": $.trim($("#tu6").find("registeredAssetsHeader").val()), 387 //累计金额 388 "projectScheduleFundsPlace": $.trim($("#tu6").find(".registeredAssets").val()), 389 //投资来源地 390 "cityId": $.trim($("#tu6").find(".cityDataHeader").val()), 391 //招商引资活动 392 "projectActivitiesId": $.trim($("#tu6").find(".SelectProjectActivitiesId").val()), 393 //项目主管部门 394 "UserDeparmentList": $.trim($("#tu6").find(".SalesDepartment").val()), 395 //投资企业性质 396 "enterpriseNatureIdd": $.trim($("#tu6").find(".enterseProperty").val()), 397 //项目类型 398 "isNotProvince": $.trim($("#tu6").find(".Projectypes").val()), 399 //签约类型 400 "projectContractType": $.trim($("#tu6").find(".ServiceMark").val()), 401 //签约状态 402 "projectContractState": $.trim($("#tu6").find(".Contractstatus").val()), 403 //形象进度 404 "projectScheduleImage": $.trim($("#tu6").find(".Imageprogress").val()), 405 }, 406 "type": "post", 407 "cache": false, 408 "async": false, 409 "dataType": "json", 410 "success": function (data) { 411 if (data.msg == 1 || data == "1") { 412 confirmPopupClose(); 413 new PNotify({ 414 title: '系统温馨提示', 415 text: '导出成功！', 416 type: 'success' 417 }); 418 window.location.href = "/fileUpload/files/xls/Project/" + data.msgbox; 419 } else { 420 new PNotify({ 421 title: '系统温馨提示', 422 text: data.msgbox, 423 type: 'error' 424 }); 425 } 426 427 }, 428 "error": function () { 429 new PNotify({ 430 title: '系统温馨提示', 431 text: '系统异常，请稍后重试。', 432 }); 433 } 434 }); 435 } else { 436 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 437 } 438 }) 439 }); 440 }
1 //导出弹窗初始化 2 function exportLizationVal() { 3 //初始化默认样式 4 $("#exportPopup").find(".has-error").removeClass(); 5 $("#exportPopup").find(".error").removeClass().text(""); 6 $(".exportTableData").val("0"); 7 } 8 //导出初始化事件 9 function exportFuntion() { 10 $(".exportTableData").change(function () { 11 tableEven($(".exportTableData"), "请选择要导出的数据表格！"); 12 }) 13 }
