Распечатать отдельный div с нормальным заголовком
Проблема такая.
Есть большая страница, на ней есть отдельный 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 Соответственно этот же адрес указывается в заголовке страницы при печати. Вот как бы сделать заголовок страницы поприличнее? |
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>
|
рони,
Спасибо. Воспользуюсь, если не придумаю ничего лучше. Там ведь в этом диве документ с определенным номером. Хотелось бы его в заголовке отражать. Номер то есть и в самом документе, но в самом начале. А если страниц несколько, то у второй и последующих будет только about:blank и номер страницы. Будет непонятно, к какому документу они относятся. Буду пробовать дальше. Есть одна мысля. |
В общем сделал так.
На серваке поместил файл 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 без всякого номера (#номер). Абидна. |
| Часовой пояс GMT +3, время: 09:53. |