利用js，无插件完成报表打印代码,JS代码库,德仔网

代码语言

代码分类

【JS】利用js，无插件完成报表打印

作者:Ben / 发布于2015/7/15/ 916

0.所谓无插件打印，就是直接利用浏览器的打印功能，当然这对网页、或者报表本身是有一定的要求的，主要要求就是要打印的主体必须是html元素，而不是flash等插件。 1.测试报表用 handsontable.js 实现，也是本人非常推崇的一个纯js实现类excel功能的组件，理论上，可以进一步封装，形成报表，其官网地址：http://handsontable.com 2.例子中用到的公共js，可以自己搜索下载，如果有webjars，可以直接使用，主要用到的其他框架是jquery（可选），html2canvas（必须） 3.此例子，主要是参考@TheBlackReverand 在 https://github.com/handsontable/handsontable/issues/1871提供的方案


	<!DOCTYPE html>
	<html>
	<head>
	 <meta charset="UTF-8">
	 <script src='/webjars/jquery/2.1.4/jquery.min.js'></script>
	 <script src='/webjars/html2canvas/0.4.1/html2canvas.js'></script>
	 <script src="scripts/handsontable.full.js"></script>
	 <script src="scripts/script.js"></script>
	 <link rel="stylesheet" media="screen" href="scripts/handsontable.full.css">
	 <title></title>
	</head>
	<body>
	<input id="btn" type="button" value="打印" onclick="printTable()">
	
	<h1>这段话我不想打印</h1>
	
	<div id="example"></div>
	<h1>这是个页脚，不需要打印</h1>
	</body>
	</html>

	

	

	

	

	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13
	14
	15
	16
	17
	18
	19
	20
	21
	22
	23
	24
	25
	26
	27
	28
	29
	30
	31
	32
	33
	34
	35
	36
	37
	38
	39
	40
	41
	42
	43
	44
	45
	46
	47
	48
	49
	50
	51
	52
	53
	54
	55
	56
	57
	58
	59
	60
	61
	62
	63
	64
	65
	66
	67
	68
	69
	70
	71
	72
	73
	74
	75
	76
	77
	78
	79
	80
	81
	82
	83
	84
	85
	86
	87
	88
	89
	/**
	* Created by liurui on 15/7/15.
	*/
	function initTable() {
	 var data = [
	 ["", "Ford", "Volvo", "Toyota", "Honda"],
	 ["2014", 10, 11, 12, 13],
	 ["2015", 20, 11, 14, 13],
	 ["2016", 30, 15, 12, 13]
	 ];
	
	 var container = $('#example')[0];
	 var hot = new Handsontable(container, {
	 data: data,
	 minSpareRows: 1,
	 rowHeaders: true,
	 colHeaders: true,
	 contextMenu: true
	 });
	}
	
	function printTable() {
	 var oldDocumentBody;
	 oldDocumentBody = document.body.innerHTML;
	 var item = $("#example")[0];
	
	 html2canvas(item, {
	 onrendered: function (canvas_source) {
	 var numImage = 0;
	
	 var pasWidth = canvas_source.width;
	 var pasHeight = canvas_source.height;
	
	 // Reinitialisation de la page courante
	 document.body.innerHTML = "<html><head><title></title></head><body></body>";
	
	 // Creation d'un canvas tampon
	 var canvas_tampon = document.createElement("canvas");
	 canvas_tampon.height = pasHeight;
	 canvas_tampon.width = pasWidth;
	 var canvas_tampon_context = canvas_tampon.getContext('2d');
	
	 // Parcours du canvas_source dans la hauteur
	 var heightRestantAImprimer = canvas_source.height;
	 var numLigne = 1;
	 while (heightRestantAImprimer > 0) {
	
	 // Parcours du canvas_source dans la largeur
	 var widthRestantAImprimer = canvas_source.width;
	 var numColonne = 1;
	 while (widthRestantAImprimer > 0) {
	 numImage++;
	
	 // Export d'une partie du canvas_source dans le canvas_tampon
	 canvas_tampon_context.drawImage(canvas_source, ((numColonne - 1) * pasWidth), ((numLigne - 1) * pasHeight), pasWidth, pasHeight, 0, 0, pasWidth, pasHeight);
	
	 // Creation d'une image afin de contenir la d&eacute;coupe
	 var img = new Image;
	 img.id = 'tempPrintImage' + numImage;
	 img.src = canvas_tampon.toDataURL();
	
	 // Ajout de l'image &agrave; la page courante
	 document.body.appendChild(img);
	
	 // Passage &agrave; la colonne suivante
	 widthRestantAImprimer = widthRestantAImprimer - pasWidth;
	 numColonne++;
	 }
	
	 // Passage &agrave; la ligne suivante
	 heightRestantAImprimer = heightRestantAImprimer - pasHeight;
	 numLigne++;
	 }
	
	 // Print Document
	 window.print();
	
	 // Restore document
	 document.body.innerHTML = oldDocumentBody;
	
	 // Clean memory
	 oldDocumentBody = "";
	 }
	 });
	}
	
	$(document).ready(function () {
	 initTable();
	});

试试其它关键字

　报表打印　

同语言下

可能有用的

Ben贡献的其它代码(12)