Javascript.RU

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

Распечатать отдельный 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, 26.01.2021 в 18:59.
Ответить с цитированием
  #2 (permalink)  
Старый 26.01.2021, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,140

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>
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2021, 20:19
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,101

рони,
Спасибо.
Воспользуюсь, если не придумаю ничего лучше.
Там ведь в этом диве документ с определенным номером. Хотелось бы его в заголовке отражать.
Номер то есть и в самом документе, но в самом начале.
А если страниц несколько, то у второй и последующих будет только about:blank и номер страницы. Будет непонятно, к какому документу они относятся.
Буду пробовать дальше. Есть одна мысля.
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2021, 08:04
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,101

В общем сделал так.
На серваке поместил файл 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 без всякого номера (#номер).
Абидна.

Последний раз редактировалось voraa, 27.01.2021 в 10:25.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
Субтитры в отдельный div den2412 Элементы интерфейса 1 12.02.2018 23:52
Вывести кнопки button в отдельный div Sokoljr Общие вопросы Javascript 5 27.06.2016 15:45
jQuery распечатать div soltx Элементы интерфейса 4 10.01.2015 23:26
как распечатать определенный DIV syegorius Events/DOM/Window 2 20.12.2011 18:29