Вход

Просмотр полной версии : Распечатать отдельный div с нормальным заголовком

voraa
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('cl ick', () => {
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
Соответственно этот же адрес указывается в заголовке страницы при печати.

Вот как бы сделать заголовок страницы поприличнее?
рони
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('cl ick', () => {
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
26.01.2021, 21:19
рони,
Спасибо.
Воспользуюсь, если не придумаю ничего лучше.
Там ведь в этом диве документ с определенным номером. Хотелось бы его в заголовке отражать.
Номер то есть и в самом документе, но в самом начале.
А если страниц несколько, то у второй и последующих будет только about:blank и номер страницы. Будет непонятно, к какому документу они относятся.
Буду пробовать дальше. Есть одна мысля.
voraa
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').textConte nt = 'Документ № '+nd;
winprint.document.body.innerHTML = s
winprint.print()
}

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

document.getElementById('bp').addEventListener('cl ick', () => {
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 без всякого номера (#номер).
Абидна.