Help, trying to print a calendar using html table, prints fine on mac but windows, all browsers, it's putting a 3" margin at top no matter what the CSS print settings. Client wants calendar to print full bleed. I can get it to print full size if I adjust the print settings on the browser to not be shrink to fit and then set it to 110% but that solution screws up the type and messes with the characters in the calendar. Is there any way to do it using straight CSS?
Add this simple Javascript code to print the calendar
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=400, height=400, left=100, top=25";
var content_vlue = document.getElementById("print_content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Print</title>');
docprint.document.write('</head><body onLoad="self.print()" style="width: 800px; font-size:12px; font-family:arial;">');
docprint.document.write(content_vlue);
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Print
<div id="print_content" style="width: 100%;">
Calendar/html table goes here
</div>
Related
For instance if I have a gallery of images that I can browse through, sometimes having multiple galleries open, I have to be careful in resizing one window because it will resize differently for another one of the same page.
The best example I can think of is when you open an image by itself in a new tab and it's auto resized proportionally in the middle of the page no matter big or small the window is. No scrolling required
If it helps here's an example of the code code where the image is shown
<div id="i3">
<a onclick="return load_image(2, 'f46ef2b433')" href="https://testsite.com/b/f46ef2b433/1341428-2">
<img id="img" src="http://testsite.com/fold01/5dde3b620790893d3ffab2da2437077dd41b31cf-230842-1280-1820-jpg/keystamp=1550591100-88d6d61f5f;fileindex=66272627;xres=2400/_000.jpg"
style="height: 1820px; width: 1280px; max-width: 1280px; max-height: 1820px;" onerror="this.onerror=null; nl('27617-430719')"></a></div>
the xpath is: //*[#id="img"]
I've seen plugins do this with videos but I'm looking to just do it with an image. Looking at other "similar" examples is confusing me more than helping at this point
(function() {
'use strict';
var x;
x = document.getElementById("img");
x.style.maxHeight = "100vh";
x.style.maxWidth = "100vw";
x.style.width = "";
x.style.height = "";
x.style.position = "fixed";
x.style.top = "0";
x.style.left = "15%";
})();
Here is my current updated script. i've been unable to change the max-height and max-with values but everything else has worked out for the most part. Without that, I'm not able to finish the task unless there's another method
x.setAttribute("style", "max-Height: 100vh");
this works but wiped away all of the other attributes...
both seem to work only in the console and not in the script as far as modifying the max height and max width values. there's no problem with changing other values
From what you described, you can use vh and vw units. Those units are relative to the size of the viewport.
Try the following exemple in a empty page. The display: body on the image avoid to have a vertical scrollbar
html,
body {
margin: 0;
padding: 0;
}
img {
display: block;
max-height: 100vh;
max-width: 100vw;
}
<a href="https://stackoverflow.com">
<img src="http://www.dummyimage.com/1000x4000/000/fff&text=1000x4000">
</a>
I think i got myself entangled in a CSS maze. I notice a horizontal scroll on my site in desktop browsers (firefox and chromium), when in responsive mode. Tested in android, and it seems ok.
The website is cv.pixyz.net
To debug it, I tried all of the following:
Looking for elements getting bigger than the parent's space.
I thought the container with #id was the problem, because web developer toolbar shows that closer to the edges of the screen, but removing that, didn't solve this
Used this to see if anything gets out of bounds. some elements stand out, but still can't solve the scroll
I tried these 2 snippets:
// snippet 1
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelector('body *'),
function(el) {
console.log(el);
// console.log(el.offsetWidth);
// console.log(docWidth);
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
// snippet 2
var all = document.getElementsByTagName("*"), i = 0, rect;
for (; i < all.length; i++) {
rect = all[i].getBoundingClientRect();
if (rect.right < 0) all[i].style.outline = "1px solid green";
}
but there's no effect either: no logs registered, no border changed
started removing other elements in the page. Even doing this, I still get scroll:
<!DOCTYPE html>
<!-- domActual = <?php echo $ambiente; ?> -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sobre mim... # Luis Aguiar</title>
</head>
<body>
<nav class="container">
<h2 class="nome">Sobre mim... / Luis Aguiar</h2>
<a class="dominio" href="http://www.cv.pixyz.net">cv.pixyz.net</a>
<ul>
<li>
ID
</li>
<li>
Dev
</li>
</ul>
</nav>
<footer>
<p>Todos os direitos reservados # Luis Aguiar</p>
</footer>
</body>
</html>
I also tried this to check abnormal widths: (http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/):
* {
outline: 1px solid blue!important;
opacity: 1 !important;
visibility: visible !important;
}
Does anyone know what is causing this, or have any other idea for debugging?
The problem appears to be the following line :
<section id="dev">
[...]
<li class="job"> /* 2nd li element */
[...]
<p class="url">https://www.demarca.eu/</p> /* <- This line */
The URL has no breaking spaces, so once the window reaches the width of the URL string it can't wrap the string and therefore the scrollbar gets added.
The options you have are:
Shorten the text:
Consider whether you need to display the full URL including https:// - maybe instead include it as a link? e.g.:
<p class="url">www.demarca.eu</p>
Use lowercase: the CSS changes the text to uppercase, which adds to the width of the string.
Wrap the URL: forcing the string to wrap is often the best option, but it doesn't suit a url so well because urls can't have spaces. However if you do want to make it wrap, you can create the following CSS class and add it to the element:
.wrap { word-wrap: break-word; }
I don't really know what it was, but after reboot, was ok (... but i cleaned the cache!). The situation persisted even without css and barebones HTML. After this, i did what you said, just in case (and because it looks nicer!). Thanks for the support!
Using Html2canvas, jsPdf, and angularjs to take a screen shot of a portion of my webpage to show as a pdf preview. I was able to successfully export the content to the pdf, but it only shows half of the content. What can I do to fix this?
Here is the button that creates the pdf. (rollup.html)
<button ng-click="genPDF()">PDF Test</button>
Within the controller, I used the html2canvas function (rollup.js)
Here I believe 'document.body.appendChild' may be the key because when it is uncommented it shows another copy of the table within the webpage when 'pdfTest' is click, as well as within the pdf preview, but only half of the content.
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.genPDF = function(){
html2canvas(document.getElementById("testDiv"), {
onrendered: function (canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',10,10);
doc.save('test.pdf');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
//width: 300,
//height: 300
});
}
});
Of course within the html page where the table is created, I have an id of testDiv within the div to the content I want appearing in the pdf.(route.html)
<div class="row" id="testDiv">
....all the table content
</div>
How can I fit the full content to the pdf preview without it cutting off? Any help is greatly appreciated.
Found a solution where I add parameters to the doc.addImage.
doc.addImage(img, 'JPEG',10,10,190,200);
I am not sure how to make the image 100 % of the pdf page, but with this I can set parameters that work best for the table atleast. Hopefully I can find a better solution, but this works for now.
I have the following certificate class for producing pdf document out of some images and data. After setting image sources, I call generate() function and get test.pdf output file. The document is created based on QTextDocument class using setHtml(html) method.
The problem is that I have huge white spaces around the document, while I want the title 'REPORT' with logo image to be on the very top of the page. I would also like to add lower border to the table, but as I understand it is not supported by Qt (Supported HTML Subset).
Python3 code:
class certificate:
def __init__(self):
self.logo = None
pdffile = 'test.pdf'
self.histogram = None
self.printer = QPrinter()
self.printer.setPageSize(QPrinter.Letter)
self.printer.setOutputFormat(QPrinter.PdfFormat)
self.printer.setOutputFileName(pdffile)
def generate(self):
document = QTextDocument()
html = ""
html += ('<head><title>Report</title><style></style></head>'
'<body><table width="100%"><tr>'
'<td><img src="{}" width="30"></td>'
'<td><h1>REPORT</h1></td>'
'</tr></table>'
'<p align=right><img src="{}" width="300"></p>'
'<p align=right>Sample</p></body>').format(self.logo, self.histogram)
document.setHtml(html)
document.print_(self.printer)
I never extensively used html before and never worked with QTextDocument, and would appreciate any advice on how to control document margins and table properties.
Other related property I want to control is resolution - I use pixel image size and need to know page and margin sizes in pixels.
EDITED: The question is almost answered by #mata. I can set now any margins and resolution, but do not understand how to control image and font sizes. E.g. if I need that an image is always 50mm wide, and html header and main text font sizes are visually the same - how to implement it?
EDITED2: The last part is solved too. Here is modified code by #mata, it gives the same result for any dpi value:
dpi=96
document = QTextDocument()
html = """
<head>
<title>Report</title>
<style>
</style>
</head>
<body>
<table width="100%">
<tr>
<td><img src="{0}" width="{1}"></td>
<td><h1>REPORT</h1></td>
</tr>
</table>
<hr>
<p align=right><img src="{2}" width="{3}"></p>
<p align=right>Sample</p>
</body>
""".format('D:\Documents\IST Projects\diashape\docbook\Installation\images\istlogo_medium.png',
40*dpi/96,
'D:\Documents\IST Projects\diashape\docbook\Installation\images\istlogo_medium.png',
200*dpi/96)
document.setHtml(html)
printer = QPrinter()
font = QFont()
font.setPointSize(12*dpi/96)
document.setDefaultFont(font)
printer.setResolution(dpi)
...
You can specify what resolution you want to use in the constructor when you create the QPrinter.
Then after you've set the pagesize, you can use width, height and resolution on the printer to fint out that values, here's what I got for Letter (dpi-values can be different, they depend on the screen or the printer):
QPrinter(QPrinter.ScreenResolution) # 96dpi, 752x992
QPrinter(QPrinter.PrinterResolution) # 72dpi, 564x744
QPrinter(QPrinter.HighResolution) # 1200dpi, 9400x12400
You can also set the dpi directly using setResolution.
The size returned by width and height is the page size (same as pageRect().size()), which ist not the same as the paper size - as the page also has margins, which you can set like this:
printer.setPageMargins(12, 16, 12, 20, QPrinter.Millimeter)
this sets left and right margins to 12mm, top to 16mm and bottom to 20mm - just for example, if you want less white space you can obviously just use smaller values.
And you should set the document size to the size of the resulting size:
document.setPageSize(QSizeF(printer.pageRect().size()))
as you've noticed yourself, the subset of html and css allowed is very limited, specially for formatting tables. But instead of using a lower border on the table you could just use a hr, which probably will look like you want it.
At least it doesn't look that bad if I test it like this:
from PyQt4.QtGui import *
from PyQt4.QtCore import *
a=QApplication([])
document = QTextDocument()
html = """
<head>
<title>Report</title>
<style>
</style>
</head>
<body>
<table width="100%">
<tr>
<td><img src="{}" width="30"></td>
<td><h1>REPORT</h1></td>
</tr>
</table>
<hr>
<p align=right><img src="{}" width="300"></p>
<p align=right>Sample</p>
</body>
""".format('', '')
document.setHtml(html)
printer = QPrinter()
printer.setResolution(96)
printer.setPageSize(QPrinter.Letter)
printer.setOutputFormat(QPrinter.PdfFormat)
printer.setOutputFileName("test.pdf")
printer.setPageMargins(12, 16, 12, 20, QPrinter.Millimeter)
document.setPageSize(QSizeF(printer.pageRect().size()))
print(document.pageSize(), printer.resolution(), printer.pageRect())
document.print_(printer)
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.