Здравствуйте!
Нужно распечатать интерактивную карту с маркерами и таблицей. С помощью платформы 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>
Уже третий день ломаю голову на этим, посоветуйте что-нибудь.
