Be nnet Макалви представил нам метод, позволяющий печатать только c div в своем ответе здесь .
Однако это не работает, когда страница div находится в содержит много текста. Если это так, пустые страницы генерируются в конце печатного документа. Как мы можем предотвратить это, используя CSS?
CSS:
@media print {
body * {
visibility: hidden;
}
#printarea, #sprintarea * {
visibility: visible;
}
#printarea {
position: absolute;
left: 0;
top: 0;
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
column-fill: auto;
height: 100%;
}
}
HTML:
<input type="button" onclick="print()" value=" --> Click Here to print! <--">
<div>
<section>
<h1>Screen</h1>
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz.</p>
<p>This is my boss, Jonathan Hart, a self-made millionaire, he’s quite a guy. This is Mrs H., she’s gorgeous, she’s one lady who knows how to take care of herself. By the way, my name is Max. I take care of both of them, which ain’t easy, ’cause when they met it was MURDER!</p>
<p>Children of the sun, see your time has just begun, searching for your ways, through adventures every day. Every day and night, with the condor in flight, with all your friends in tow, you search for the Cities of Gold. Ah-ah-ah-ah-ah… wishing for The Cities of Gold. Ah-ah-ah-ah-ah… some day we will find The Cities of Gold. Do-do-do-do ah-ah-ah, do-do-do-do, Cities of Gold. Do-do-do-do, Cities of Gold. Ah-ah-ah-ah-ah… some day we will find The Cities of Gold.</p>
<p>One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it’s a pretty story. Sharing everything with fun, that’s the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you’ve got a problem chum, think how it could be.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.</p>
</section>
<section id="printarea">
<h1>Printed</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit libero eu diam dignissim, eget scelerisque lorem facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus tempor lacus sit amet faucibus sodales. Sed mattis sed
felis ut lacinia. Proin pretium augue nec condimentum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim vulputate sagittis. Integer diam justo, suscipit a metus sed, facilisis condimentum
nibh. Nulla ut accumsan lorem, semper iaculis lectus. Pellentesque a nulla id elit accumsan gravida venenatis at urna. Quisque convallis pellentesque arcu, nec cursus nibh bibendum vel. Praesent porta est sit amet nisi hendrerit bibendum. Sed condimentum,
mi vel accumsan pellentesque, magna orci tincidunt nulla, at imperdiet nunc odio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
dictum pellentesque. Proin condimentum porttitor felis, a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur, et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo, consequat in tortor vitae, vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
vehicula. Nunc consequat neque eros, eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet, eu aliquet velit tempus. Sed ornare tincidunt velit, ac venenatis neque. Fusce condimentum fringilla est,
eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat, cursus sem non, luctus nisl. Morbi rhoncus dignissim ante et
fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa, semper ut congue a, consequat eu turpis.
</section>
</div>
<input type="button" onclick="print()" value=" --> Click Here to print! <--">
Выше HTML добавится дополнительная пустая страница из-за количества «экранного» текста в документе.
Связанный ответ также содержал некоторые другие CSS ответы, но они требуют, чтобы div printarea был дочерним по отношению к тегу body. Поскольку я делаю это в Vue. js, мой тег div всегда будет находиться глубже в структуре html.