Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2018, 18:07
Новичок на форуме
Отправить личное сообщение для Shemp Посмотреть профиль Найти все сообщения от Shemp
 
Регистрация: 13.12.2018
Сообщений: 3

Некорректная печать
Здравствуйте!

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


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

Последний раз редактировалось Shemp, 13.12.2018 в 18:21.
Ответить с цитированием
  #2 (permalink)  
Старый 13.12.2018, 18:23
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Shemp
посоветуйте что-нибудь.
принтскрин и распечатать
Ответить с цитированием
  #3 (permalink)  
Старый 13.12.2018, 18:55
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

Скачать https://nodejs.org/en/

Создать папку, в ней создать два файла:

package.json
{
  "name": "puppeteer_pdf",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "puppeteer": "^1.11.0"
  }
}


index.js
const puppeteer = require('puppeteer')
const { join } = require('path')
const htmlFile = 'html.html'
const pdfFile = 'html.pdf'
const job = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setViewport({
    width: 1024,
    height: 800,
    // landscape: true,
  })
  await page.goto(`file:${join(__dirname, htmlFile)}`, { waitUntil: 'networkidle2' })
  // форматы "Letter", "Legal", "Tabload", "Ledger", "A0", "A1", "A2", "A3", "A4", "A5"
  await page.pdf({ path: pdfFile, format: 'A4', landscape: true })
  await browser.close()
}
job()


в этой папке выполнить две команды:
npm install
node index.js

должен появиться pdf из файла html %)

Последний раз редактировалось SuperZen, 13.12.2018 в 19:45.
Ответить с цитированием
  #4 (permalink)  
Старый 13.12.2018, 19:13
Новичок на форуме
Отправить личное сообщение для Shemp Посмотреть профиль Найти все сообщения от Shemp
 
Регистрация: 13.12.2018
Сообщений: 3

Спасибо за ответ. Увы, но я уже вышел с работы и сегодня проверить не смогу.

А возможно это реализовать без скачивания файлов (вернее, создания локальных файлов), а посредством подключения их через ссылку или напрямую вшить из в код? Меня не волнует оптимизация, а только результат.

Последний раз редактировалось Shemp, 13.12.2018 в 19:21.
Ответить с цитированием
  #5 (permalink)  
Старый 13.12.2018, 19:23
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

SuperZen,
Результат отличается чем нибудь от хромовского браузерного PDF?
Ответить с цитированием
  #6 (permalink)  
Старый 13.12.2018, 19:25
Новичок на форуме
Отправить личное сообщение для Shemp Посмотреть профиль Найти все сообщения от Shemp
 
Регистрация: 13.12.2018
Сообщений: 3

Да, потому что 1С работает с IE, а не с Хромом.
Ответить с цитированием
  #7 (permalink)  
Старый 13.12.2018, 19:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Shemp,
Хром при сохранении вашего html в PDF так же криво маркеры расставляет, вот я и спросил про puppeteer_pdf, это же просто конвертер, к 1с он ведь отношения не имеет.
Ответить с цитированием
  #8 (permalink)  
Старый 13.12.2018, 19:45
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

то что будет на "экране", будет в pdf, если хром этот файл показывает валидно, то варик, что сделает все правильно 99%
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать печать стороннего HTML файла через js/jquery. Defrazo Общие вопросы Javascript 0 22.03.2017 19:55
POST запрос вывод на печать kristow Events/DOM/Window 1 30.12.2015 17:04
Как выводить на печать содержимое нужного Div-а? sarik Общие вопросы Javascript 9 04.03.2013 14:02
Печать сразу без диалогового окна savr Javascript под браузер 0 14.02.2013 19:31
При отправке страницы на печать е подключаються стили! Что посоветуете! bozeak Общие вопросы Javascript 3 07.12.2009 18:04