I have a HTML page which is a report. When I use printing function (Ctrl+P), it is 10 pages long. I want to display a watermark for each page.
Anybody has suggestion?
Thanks.
Use a print stylesheet combined with css fixed positioning to repeat the watermark on each page.
#media print {
…
}
You can use a print styles sheet to add some extra styling (and watermark). it can be a bit tricky on getting it to work with it repeating the watermark across each page. You can view some more information here: http://www.andypemberton.com/css/print-watermarks-with-css/
Typically with reports I tend to use another tool that converts the page into a pdf such as wkhtmltopdf (http://wkhtmltopdf.org/) or PDFtk (https://www.pdflabs.com/docs/pdftk-man-page/). It allows you to input various settings to include watermarks, cover pages, table of contents and even page numbers.
Related
I'm trying to forbid users to save my website's content as pdf but I still want to allow them to print the content.
<style media="print" type="text/css">* { display: none; }
The above css style hides all content so when user hits (ctrl+p) it doesn't display my content which is good.
But is there a way to only display my content when user tries printing and then if user tries to save as pdf display nothing?
Thank you,
You can't. Most operating systems implement "save as PDF" as part of the print workflow -- there's no distinction from the perspective of a web page.
As an aside, your CSS isn't going to be an effective way of preventing users from printing your content either -- if normal printing doesn't work, they'll find a workaround like taking a screenshot of the page, or copying its text into a text file.
I am trying to put a copyright symbol at the bottom of each page when the PDF is generated but I cant seem to get it to work. How would I go about doing such a thing? I am using HtmlRenderer and PDFsharp, take my HTML body and convert it to a PDF file that the user can download.
I don't want to put a watermark over the top as it is a legal document for paying customers, I just wanted the little copyright symbol company name and date at the bottom.
Is there a way of saying to PDFsharp to use a say template PDF file that has a footer with the info at the bottom or is there a way of setting it in the physical code?
I Worked it out if you add styling position:fixed and then a top position because it doesnt understand bottom it will add a text to every page wherever you align it to.
If anyone would like more information on this I've linked a pull request which details the use of position: fixed to create header/footers.
There is also a class in the generator itself PdfGenerateConfig which will allow you to create corresponding margins in the document.
https://github.com/ArthurHub/HTML-Renderer/pull/41
I don't know if HtmlRenderer allows to add headers and footers that will be repeated on every page. HtmlRenderer is not part of PDFsharp.
With PDFsharp it is simple to open a document, loop through the pages and draw a string at the bottom of each page.
The Watermark sample can be used to get started - just remove the Transformation part and draw the text at the bottom of the page.
Similarly you can draw a PDF page (template) over each page of an existing PDF document.
A third option: Draw the text on an XForm and draw that XForm on each page. Overkill for a simple text string, but could reduce file size for a complex footer.
Watermark sample:
http://pdfsharp.net/wiki/Watermark-sample.ashx
XForms sample:
http://pdfsharp.net/wiki/XForms-sample.ashx
I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.
I have an HTML page and I need to show the page in multiple portions. When user clicks next, the next portion of the page is shown to the user. I am using spring-mvc, Itext and thymleaf.
Is there anyway I can do this?
Or is there anyway I can convert PDF to html using Itext?
There's a js solution only written as an answer here Splitting a long page into a number of pages
a fiddle http://jsfiddle.net/doktormolle/XwUuA/
to have it splitting to A4 just change the dimension in the css
#paginate{width:200px;height:290px;overflow:hidden;border:1px solid #414141;}
It might not be perfect depending on your page, but I find it a very nice script targeting just what you need
when i need a easy way to change page content in single page from multiple pages i use this:`
link
link
link
Jquery
$("main").load("site1.html");
$("a").click(function(e) {
e.preventDefault();
$("main").load($(this).attr('href')+".html");
});
});
What the script does is getting content from the link you click on. So you would need additional pages with your content inside. :)
example on your site names for your content:
site1.html site2.html site3.html
pretty simple. Just ask if you need more help i will set up an example and zip it
to you.
Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.
I found this...
html to jpg with c#
However...
I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.
It looks like you should be able to do it using javascript with this technique:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Make sure to take note of the following caveat however:
Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.
EDIT: You may also want to check out these related questions:
Save HTML5 canvas contents, including dragged-upon images
How to save a HTML5 Canvas as Image on a server