Javascript-форум - Показать сообщение отдельно

Shemp · #1 (**permalink**) 13.12.2018, 18:07

Здравствуйте!

Нужно распечатать интерактивную карту с маркерами и таблицей. С помощью платформы 1С генерируется HTML-код с уже заполнеными таблицами, маркерами и так далее.

Суть в чём:
Когда я пытаюсь распечатать страницу с помощью window.print() или нажатием Ctrl+F, то печать отображается некорректно. Растягивается первый слой с картой на лист А4, маркеры сохраняют последовательность, но сильно смещаются, а таблица теряет стили.

Я хочу распечатать документ в таком виде:

https://ibb.co/5sW0Pzx

А вот что получаю:

https://ibb.co/GTb2Ny9

Вот пример генерируемого кода (он собираетстся по кускам, так что местами небольшой бардак):

<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<head>

<body>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

		<style type="text/css">	

		#ButtonPrint {

			position: absolute;
			z-index: 2;
			left: 40px;
			top: 5px;
			border-radius: 10px;
			font-family: MS Shell Dlg;
			background-color: RGB(255, 255, 224);
			width: 60px;
			height: 30px;

		}

		table {
		
			position: fixed;
			z-index: 2;
			bottom: 0;   		
			width: 100%;
			font-weight: 8;
			border-collapse: collapse;
			border: 1px solid black;
			padding: 3px;
			border-radius: 10px;

		}

		#TabHead {

			background-color: RGB(220, 220, 220);			
			border: 1px solid black;

		}

td {

	background-color: RGB(255, 255, 224);
	border: 1px solid black;

}

	</style>

	<input type="button" id="ButtonPrint" onclick="this.style.display='none'; window.print();" value="Drukuj" />
	
	<style type="text/css">

	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#map {
		height: 100%;
		position:relative;
		z-index:1;
	}

	#map_coord {
		background-color: RGB(242, 242, 242);
		position:relative;
		z-index:2;
	}

	#centerLat {
		background-color: RGB(242, 242, 242);
	}

	#centerLng {
		background-color: RGB(242, 242, 242);
	}

	</style>

<div id="map_coord">
	<input type="text" style = "display: none; position: absolute; top: 0 px; width: 100px; left: 0 px;" id="lat" value=51.9464583932>
	<input type="text" style = "display: none; position: absolute; top: 0 px; width: 100px; left: 105 px;" id="lng" value=15.5104903243>
	<input type="text" style = "display: none;" id="centerLat" value=51.9464583932>
	<input type="text" style = "display: none;" id="centerLng" value=15.5104903243>
</div>
<div id="map"></div>  

<script type="text/javascript" src="http://maplib.khtml.org/khtml.maplib/khtml_all.js"></script>  
<script type="text/javascript">

        var map;
	var WMS;
	var zoom = 7;
	var zoominger;

	map = khtml.maplib.Map(document.getElementById("map"));
	map.centerAndZoom(new khtml.maplib.LatLng(document.getElementById('lat').value, document.getElementById('lng').value), zoom);

	map.addCallbackFunction(function(event) {
		SetMapCoordinate();
	});

	zoominger = new khtml.maplib.ui.Zoombar();
	map.addOverlay(zoominger);

	var keyboard=new khtml.maplib.ui.KeyBoard();
	map.addOverlay(keyboard);


	marker1 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(51.9464583932, 15.5104903243), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=1&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Zielona Góra DA ul. Dworcowa"
	});

	marker1.addCallbackFunction(function(event) {
		SetCoordinate(marker1);
	});
	marker2 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(51.0961862202, 17.0386714242), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=2&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Wrocław DA ul. Sucha"
	});

	marker2.addCallbackFunction(function(event) {
		SetCoordinate(marker2);
	});
	marker3 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(50.2626440819, 19.0173620109), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=3&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Katowice DA ul. Piotra Skargi"
	});

	marker3.addCallbackFunction(function(event) {
		SetCoordinate(marker3);
	});
	marker4 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(50.067806492, 19.9493161459), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=4&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Kraków MDA ul. Bosacka"
	});

	marker4.addCallbackFunction(function(event) {
		SetCoordinate(marker4);
	});
	marker5 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(49.9555480801, 23.1144036798), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=5&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Korczowa Przejście graniczne"
	});

	marker5.addCallbackFunction(function(event) {
		SetCoordinate(marker5);
	});
	marker6 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(49.9564395439, 23.1149104021), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=6&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Krakowiec Przejście graniczne"
	});

	marker6.addCallbackFunction(function(event) {
		SetCoordinate(marker6);
	});
	marker7 = new khtml.maplib.overlay.Marker({
		position: new khtml.maplib.LatLng(49.8401851008, 23.9954350914), 
		map: map,
		draggable: false,
		raiseOnDrag: true,
		icon: {
			url: "https://mt.google.com/vt/icon/text=7&psize=16&font=fonts/arialuni_t.ttf&color=ff550000&name=icons/spotlight/spotlight-waypoint-a.png&ax=44&ay=48&scale=1",
			size: {width: 22, height: 40},
			origin: {x: 0, y: 0},
			anchor: {
				x: "-11px",
				y: "-40px"
			}
		},
		title: "Lwów AC Dworzec PKP pl. Dworcowy"
	});

	marker7.addCallbackFunction(function(event) {
		SetCoordinate(marker7);
	});						

	function SetCoordinate(marker) {
		LatLng = marker.getPosition();
		document.getElementById('lat').value = LatLng.lat().toString();
		document.getElementById('lng').value = LatLng.lng().toString();
	};

	function SetMapCoordinate() {
		LatLng = map.center();
		document.getElementById('centerLat').value = LatLng.lat().toString();
		document.getElementById('centerLng').value = LatLng.lng().toString();
	};

</script>

<style type="text/css">

table {
		
	position: fixed;
	z-index: 2;
	bottom: 0;   		
	width: 100%;
	font-weight: 8;
	border-collapse: collapse;
	border: 1px solid black;
	padding: 3px;
	border-radius: 10px;

}

#TabHead {

	background-color: RGB(220, 220, 220);			
	border: 1px solid black;

}

td {

	background-color: RGB(255, 255, 224);
	border: 1px solid black;

}

</style>

<table>
	<td id = "TabHead">№</td>
	<td id = "TabHead">Przystanek</td>
	<td id = "TabHead">№</td>
	<td id = "TabHead">Przystanek</td><tr>
		<td>1</td>
		<td>Zielona Góra DA ul. Dworcowa</td>
		<td>5</td>
		<td>Korczowa Przejście graniczne</td>
	</tr><tr>
		<td>2</td>
		<td>Wrocław DA ul. Sucha</td>
		<td>6</td>
		<td>Krakowiec Przejście graniczne</td>
	</tr><tr>
		<td>3</td>
		<td>Katowice DA ul. Piotra Skargi</td>
		<td>7</td>
		<td>Lwów AC Dworzec PKP pl. Dworcowy</td>
	</tr><tr>
		<td>4</td>
		<td>Kraków MDA ul. Bosacka</td>
		<td></td>
		<td></td>
	</tr></table>

</body>
</html>

Уже третий день ломаю голову на этим, посоветуйте что-нибудь.