I'm using a JavaScript function call a pop-up window to print out my label, and the function include the CSS link. The problem is it seems that the CSS doesn't affect the printing page when I preview it, I have no idea which portion when wrong. Anyone can please give me advice?
JavaScript code:
function ConfirmButton() {
if (true) {
var prtContent = document.getElementById("<%=printing.ClientID %>");
var WinPrint1 = window.open('', '', 'scrollbars=yes,letf=0,top=0,width=400,height=430');
WinPrint1.document.writeln('<body><link href="CSS/bootstrap.min.css"rel="stylesheet" /><link href="Printing.css"rel="stylesheet" media ="print"/>');
WinPrint1.document.write(prtContent.innerHTML);
WinPrint1.document.writeln('</body></HTML>');
WinPrint1.document.title = "Test Printing";
WinPrint1.document.close();
WinPrint1.focus();
WinPrint1.print();
return true;
}
else {
return false;
}
}
CSS page name "Printing.css":
body {
background-color: red;
}
Background colors aren't rendered when printing ... and that's a good thing. A printed page has its own medium with its own background colors, unlike a screen which is much more dynamic and multi-variate. Being able to paint the canvas on a screen makes much more sense than on a page.
If, for some reason, you really wanted to print a section in red, you could wrap the entirety of your content in a container, and do some CSS wizardry like so:
<section class="page-container">
<div>All my content...</div>
<div>All my content...</div>
<div>All my content...</div>
</section>
.page-container {
position: relative;
z-index: 1;
height: 100vh;
}
.page-container:after {
content: url(data:image/png;base64,...LONG BASE64 STRING...==);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.page-container > div {
position: relative;
z-index: 2;
}
Here's a fiddle illustrating the general concept, try printing it.
Related
I am building a Nuxt app, not sure why this is not working only in scoped style tag.
This is what I usually do for style.
index.vue
...some code..
<script>
some code here
</script>
<style scoped>
.text1 {
overflow: auto;
}
</style>
The code above had no issue.
What I am trying to do is to print stuff inside dialog.
In detail, I have a page with long text (about 3 pages if printed) and button to open a dialog.
Inside dialog, there's some image & text and print button.
When I click the button, I want to print stuff inside dialog, but nothing else.
This is what I did:
<template>
...some text that I don't want to print..
<v-dialog>
<v-container id="printable">
image and text to print
</v-container>
</v-dialog>
...
</template>
<script lang="ts">
export default Vue.extend({
methods: {
print() {
const modal = document.getElementById('printable');
const cloned = modal!.cloneNode(true);
let section = document.getElementById('print');
if (!section) {
section = document.createElement('div');
section.id = 'print';
document.body.appendChild(section);
}
section.innerHTML = '';
section.appendChild(cloned);
window.print();
},
},
})
</script>
<style scoped>
#media screen {
#print {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#print,
#print * {
visibility: visible;
}
#print {
position: absolute;
left: 0;
top: 0;
}
}
.text1 {
overflow: auto;
}
</style>
When I clicked the print button,
I got 3 pages of text that's supposed to be invisible.
Also any image and text inside modal was gone.
Now, if I change
<script scoped> to <script>
everything works as expected.
but I can't understand why..
(and I want to use scoped if possible as it's recommended)
Also, even with <script>
I still get 3 pages (1st page with modal stuff then blank pages for 2nd and 3rd)
Does anyone know how to remove 2nd, and 3rd page?
For the first part, you probably need some deep selectors because I guess that you're targeting a nested component with v-dialog, you can see how to write it here: https://stackoverflow.com/a/55368933/8816585
So wrapping like
>>> .text1 {
overflow: auto;
}
As for the fact that it's printing but should not, it maybe comes down from the actual state this is in at the time you click on the button. Additional code may be useful here.
Not sure if it can help but packages like html2canvas may also help.
Here are some questions that I've once saw using this package, there are probably more.
They may be be more suited to print into a Vue environment.
I have a simple HTML page that I want to convert to pdf (print mode). I got the Header to repeat in every page but I noticed that the header covers the content in the second page. Any one know how to avoid that?
Note: I am using Bootstrap, but I commented it out so I could use my own styles.
SCSS:
#media print{
header{
position: fixed;
top: 0;
border: none;
}
main{
margin-top: 2cm;
}
footer{
position: fixed;
bottom: 0;
}
#page {
size: auto;
//margin: 6.35mm;
}
}
Fiddle for HTML: https://jsfiddle.net/u1oy0ehj/
Thanks!
#media print executes the code only for the print mode. So anything you include inside this is not affected in the normal browser mode. So you can get rid of the position: fixed; in the header only for print mode so it doesn't behave that way even in the print mode.
Fixed positioning takes an element out of the document flow, so no fiddling the element will work.
JSFiddle updated
If you want the position: fixed then all you can do is push the <main> content down only for print mode.
main{ margin-top: 5cm; } //probably more than what you had given '2cm'
Even this can't help you much because in the second page since you have made your header fixed(its out of the document flow), the overflowing contents will think the header doesn't exist and continue as usual giving you an overlapped effect.
<div id="list${MACRO}TopDivRow" class="row">
<style>
#media print{
body *:not(#list${MACRO}TopDivRow):not(#list${MACRO}TopDivRow *){
visibility: hidden;
}
#list${MACRO}TopDivRow {
visibility : visible;
position: absolute;
left: 0;
top: 0;
}
}
</style>
<button onclick="window.print();">
print
</button>
---------------------Explanation--------------------------------
#media print is useful to print a page.
#list${MACRO}TopDivRow - this is the division id which you want to print.
in the entire body of page, first iam hidding the content which is not belongs to my perticular division.so i have written **visibility : hidden** there. In the second code snippet, iam printing required division, so i have placed **visibility : visible there**.
window.print() - useful to print the content of window.
you can use completely JavaScript to print the particular division in your page.here we are using simple swapping logic between original content and particular division.if you want entire page, pass entire page division id.
<script type="text/javascript">
function printContent() {
var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
list${MACRO}TopDiv - this is your division which you want to print
As far as I know I can't directly change the opacity of a background image but using ::before and ::after doesn't seem to let my image show up. Am I doing it wrong?
HTML
flower window boxes
All of our products come in virtually any length up to 16 feet and two sizes. Our standard size boxes are designed to accommodate almost any flower. Our XL sizes are taller and deeper to provide more root space for plants making them the ideal sized window boxes for plants.
</div>
<div class="card-back">
<h2 class="click-here"><b>Visit Site</b></h2>
<div class="info">
<h2 class="info">Email:</h2>
<h2 class="info">Phone:</h2>
</div>
</div>
<!-- Content -->
<div class="all-content">
<h1>Contrary to popular belief</h1>
</div>
</li>
Current CSS
.content li:nth-child(1) .card-back{
background-image:url(../images/sponsor-imgs/Cellular%20PVC%20Columns-Kingston-1.jpg);
width: 100%;}
What I've tried
.backimg::after {
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
.backimg::before{
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
div::after {
opacity: 0.5;
}
On a side not i know i can simply make the images themselves transparent, but i feel like a code to do it much more useful in the long run. thanks in advance.
::before and ::after require a content property. You can set it to an empty string but it must be included.
In most cases you also need to define a display property and assign some dimensions to the element (unless you are using something like position: absolute; top: 0; bottom: 0; left: 0; right: 0; - in which case, you don't).
.backimg {
background: red;
}
.backimg::after {
content: "";
display: block;
width: 200px;
height: 200px;
background-image: url(http://placehold.it/200x200);
opacity: 0.5;
}
<div class="backimg"></div>
You are missing the .backimg class in your html.
Dont use double :: and add content and display properties to after. Also some dimensions wouldnt hourt (width,height)
.class:after{
Cintent:"";
Display:block; // change as you see fit
}
I'm trying add a simple text watermark that I want to appear for each page that it will get printed on and look reasonable on Firefox, IE and Chrome.
I've gone through all the related threads that I could find and have applied the suggested answers, but to no avail. Either it appears fine on every page, but doesn't show on the first page (Firefox). Or it only appears on the first page (Chrome). Or doesn't show at all.
I was wondering, is there a standard way to do css watermarks that works for all browsers that I may have missed somehow?
For those curious as to what my html/css looks like at the moment:
<div class="watermark">This is a watermark!</div>
#media print {
.watermark {
display: inline;
position: fixed !important;
opacity: 0.25;
font-size: 3em;
width: 100%;
text-align: center;
z-index: 1000;
top:700x;
right:5px;
}
}
Any help is much appreciated!
Edit: This isn't just for watermarking images, otherwise as suggested I should use an image editor. This is for watermarking pages of document content (sections of text of various sizes).
The real problem is that you need a .watermark at the bottom of each printed page, but CSS has no concept of these printed pages.
The best you could probably do is to use the page-break-after CSS attribute to force a page break at certain points, then you could position your watermark just before that.
Something like (untested):
#media all {
.watermark {
display: none;
background-image: url(...);
float: right;
}
.pagebreak {
display: none;
}
}
#media print {
.watermark {
display: block;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
<body>
some content for page 1...
<div class="watermark"></div>
<div class="pagebreak"></div>
some content for page 2...
<div class="watermark"></div>
<div class="pagebreak"></div>
</body>
Really I think those 2 classes could just be the same element, but this seemed more understandable in code.
The down side here of course is that you need to manually specify where each page break happens, and realistically, if someone prints your webpage on a 4"x6" notecard, its going to be radically different than standard size paper. But still, it's a step in the right direction.
You can't do this in css, simply because it won't work.
Think of this, the user just removes your css, gets your image URLs and copies the images, without the watermark. Right click 'save image url' will also bypass css.
There are two good ways to add watermarks that are fail-safe.
Edit the actual images
If you have control over the images, such as if you are building a photography portfolio, just batch process them in your image editor and add the watermarks before you upload them to the web.
This is a good idea because then your images are ready watermarked regardless of where you use them, so they're social media / promo pack ready etc.
Do it on request
Set up an .htaccess rule that intercepts any image requests and redirects them via some server side code that uses an image processing library to add the watermark and return the binary image data. You can cache a watermarked image with a hash code and check for a watermarked version existing first that will allow you to bypass the processing.
This means that any image request, regardless of whether it comes from css, HTML, or a direct URL will serve a watermarked image. Do use some logic to skip any images used for the decoration of your site, otherwise you'll get watermarked in unexpected places!
The advantage here is that the original image is untouched, if you update your watermark, perhaps as part of a rebranding, you won't need to update all your images.
Another advantage of this approach is that you can apply it to any images, even if you don't create them - for example, if you have users uploading images to your site. Care should be taken with this however, before you watermark, make sure you have the right to watermark the image.
issue reason.
print not support background-image.
This is my solution.
1.Absoluted position for Main elements(need to print div).
2.add element
<style>
.mainContend{
position: absolute;
top: 0;
}
.watermark{
opacity: .8;
}
</style>
<script>
var addWatermark = function () {
var bodHeight = document.body.scrollHeight;
//imge size is 1000*400px
var imgNum = Math.floor(bodHeight/400) ;
var template = '<img src="../img/icon/watermark.png" class="watermark">';
var innerHTML;
//create image number
for(var i = 0;i < imgNum;i++){
innerHTML +=template;
}
// innerHTML.appendTo("#reportContent);
$("#reportContent").append(innerHTML);
}
window.onload = addWatermark;
</script>
<div id="reportContent">
<div class="mainContend" id="mainContend">
content reportContentreportContentreportContent
</div>
</div>
Here is how I successfully managed to use watermark on every page in print preview
HTML:
<!-- place this only once in page -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark"></div>
<!-- place this in your table thead -->
<div style="opacity: .5; filter: alpha(opacity=50);" class="watermark_print"></div>
CSS:
div.watermark_print{
display: none;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
div.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{{{watermark}}}") no-repeat;
background-position: center;
z-index: 99999999;
border: none !important;
background-size: 400px !important;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
#media print {
div.watermark {
display: none;
}
div.watermark_print {
display: block;
position: fixed;
inset: 0;
}
}
That should do the trick, we have two watermark, one in HTML page review and another hidden in normal view but in print preview, we show it and because we are repeating table header in every page so we have this watermark on every page.
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.