Форум

voraa · #1 (**permalink**) 26.01.2021, 19:55

Проблема такая.
Есть большая страница, на ней есть отдельный div, текст которого надо распечатать.
Пытаюсь сделать так: открываю отдельное окно, в которое передаю заранее подготовленный документ с текстом этого дива. Это документ при загрузке вызывает печать.

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
       <div> Это не печатаем </div>
	<div id=dprint>
	Всякая бла-бла-бла,<br>
	которую нужно<br>
	напечатать
	</div>
       <div> Это тоже не надо </div>
	<button id=bp>Print</button>	
</body>
<script>
// Шаблон документа
const prtempl = `  
<!doctype html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
</style>
<sc` + `ript>
window.addEventListener('load', () => {
	window.print()
})
</s` + `cript>

</head>
<body>
$doc$          
</body>
</html>`;
     // конец шаблона

document.getElementById('bp').addEventListener('click', () => {
	let dp = document.getElementById('dprint')
	let spr = prtempl.replace('$doc$', dp.outerHTML)
	let purl =  window.URL.createObjectURL(new Blob([spr],  {type: 'text/html'}));
	let wp = window.open (purl, 'print', "left=0,top=0,width=700,height=600,status");
})

</script>
</body>
</html>

Все нормально работает.
Вот только адрес этого документа имеет вид
blob:******/8d03567a-c6d8-4b79-8c4e-1383ac9e75ac
Соответственно этот же адрес указывается в заголовке страницы при печати.

Вот как бы сделать заголовок страницы поприличнее?

рони · #2 (**permalink**) 26.01.2021, 20:43

voraa,
about:blank подойдёт?

<!doctype html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
       <div> Это не печатаем </div>
    <div id=dprint>
    Всякая бла-бла-бла,<br>
    которую нужно<br>
    напечатать
    </div>
       <div> Это тоже не надо </div>
    <button id=bp>Print</button>
</body>
<script>
// Шаблон документа
const prtempl = `
<!doctype html>
<html>
<head>
<title>Печать документа</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<style>
</style>
<sc` + `ript>
window.addEventListener('load', () => {
    window.print()
})
</s` + `cript>

</head>
<body>
$doc$
</body>
</html>`;
     // конец шаблона

document.getElementById('bp').addEventListener('click', () => {
    let dp = document.getElementById('dprint')
    let spr = prtempl.replace('$doc$', dp.outerHTML)
    let wp = window.open ('', 'print', "left=0,top=0,width=700,height=600,status");
    wp.document.open();
    wp.document.write(spr);
    wp.document.close()
})

</script>
</body>
</html>

voraa · #3 (**permalink**) 26.01.2021, 21:19

рони,
Спасибо.
Воспользуюсь, если не придумаю ничего лучше.
Там ведь в этом диве документ с определенным номером. Хотелось бы его в заголовке отражать.
Номер то есть и в самом документе, но в самом начале.
А если страниц несколько, то у второй и последующих будет только about:blank и номер страницы. Будет непонятно, к какому документу они относятся.
Буду пробовать дальше. Есть одна мысля.

voraa · #4 (**permalink**) 27.01.2021, 09:04

В общем сделал так.
На серваке поместил файл print.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title></title>
<style>
</style>
</head>
<body>         
</body>
</html>

А печать делаю так

let winprint = null;    // окно для печати

const print = (s, nd) => {
		winprint.document.querySelector('title').textContent = 'Документ № '+nd;
		winprint.document.body.innerHTML = s
		winprint.print()
}

let numdoc = 'ВФ-1234';    // типа номер документа

document.getElementById('bp').addEventListener('click', () => {
	let sdoc = document.getElementById('dprint').outerHTML;
	if (!winprint || winprint.closed) {
		winprint = window.open ('print.html#' + numdoc, 'print', "left=0,top=0,width=700,height=600");
		winprint.onload= ()=>{
			print(sdoc, numdoc);
		}
	} else {
		winprint = window.open ('print.html#' + numdoc, 'print', "left=0,top=0,width=700,height=600");
		print(sdoc, numdoc);
	}
})

Открытие окна с url 'print.html#' + numdoc помещает этот url в нижний колонтитул печатаемых страниц. А в верхнем колонтитуле будет содержимое <title>
Есть правда некоторые непонятки по коду (делал просто научным тыком). Если после печати документа, не закрывать окно, а потом снова сделать window.open ('print.html#' + numdoс ....) уже с другим номером документа, то событие onload не возникает. Почему???
Отсюда и пришлось делать проверку и печатать без onload (строки 18-21)

При сохранении в pdf предлагаемое имя файла все равно только print.pdf без всякого номера (#номер).
Абидна.

Форум

Справочник

Discord чат

Курсы javascript