I have an ASP.NET WebForms app. On a page of the app I have an image (implemented by DevExpess control AspxBinaryImage).
I have to add Print Image functionality on the page: a button Print that prints out the image (not the whole page)
How can I implement this?
Use CSS to define which parts of your webpage should be printed:
#media print {
#somediv {display: none}
}
Then you can implement a javascript:window.print() callback in your button that will cause the browser to only print the elements you want to be printed (i.e. your image).
Related
I have this to hide the headers in every page of my #media print:
.layout-topbar {
display:none;
}
However I need to show the header in only the first page of every print, haven't been able to find the way.
I am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
I have a webform my client wants users to be able to print out. It works fine with a little styling using CSS, however, I have several textaear fields. If a user types more than the height of the textarea the type is cutoff when printed.
I have tried textarea{height:100%;} and textarea{height:auto;} in the print stylesheet but neither of those works.
Is there a way to resize the textarea field to the size of the text for the print only version? I would prefer a CSS solution if possible that I can insert into my print stylesheet. If this isn't possible javascript solution would work.
Screenshot Comparison:
Note: If I cannot affect just the print version I can considered using JS to auto-resize the textarea field as someone is typing.
This worked for me (adapted from this JS and this jQuery):
function resizeAndPrint() {
var _print = window.print;
window.print = function() {
$('textarea').each(function() {
$(this).height($(this).prop('scrollHeight'));
});
_print();
}
window.print();
}
This problem exist in firefox browser.
Please open the html file in chrome browser for printing text between textarea tags. There is no need apply style and script for printing large text of textarea.
Steps to follow:
open HTML file in chrome browser.
Click Ctrl + P.
Click on Save button ( Select PDF format ).
Open PDF file ( See all text between textarea whether it is moves to second page if excess text contains)
Click Print button.
I have a .NET (vb) page that is rendered using 2 master pages and a few user controls.
My users now want a "print" button.
Is there a way to strip the main content out of the page, and re-render without all the master page and user control content?
Thanks
You could use CSS to hide elements on the page when printing. There would be no need for a round trip to the server then.
#media screen
{
div.header {...}
}
#media print
{
div.header {display:none;}
}
#media screen, print
{
...
}
You could create a different masterpage then change to your 'alternate' stripped master which could include a print stylesheet.
There are some code samples at http://ipona.com/samples/ ( Bottom of the page links to a Skydrive folder at https://skydrive.live.com/?cid=635c8e2bf4822d7c&id=635C8E2BF4822D7C!498 )
I have a button in asp.net (c#) that I want after click this button I could print from my html table that is in a update panel ,I only want Print my html table not all page
is there any component?
thanx very much
2 ways to handle it:
CSS to define a print media
Reporting services, hit the data directly from a sproc / direct table
and print a table layout of the data.
Based on OP comment
Straight from W3c:
http://www.w3.org/TR/CSS2/media.html
Read specifically about print media, it means you can define a .css file in your asp.net project with the media type "print":
#media print {
/* style sheet for print goes here */
}
This is nice because you can now define CSS to hide all elements on your screen:
display:none
Except the div / table of your choice:
#myDiv {
display: block;
}
In your asp.net page you have this define:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="printStyle.css">
This tells your application to use the printStyle.css file when it comes to printing your page.
And once you do try to print the app will use printStyle and all the formatting and styles you have defined.
Here is a good example: https://web.archive.org/web/20200724145536/http://www.4guysfromrolla.com:80/demos/printMediaCss.html
For the second point, if you are running SQL Server, reporting services is free. Of course you will need to set this up and deploy reports. Its a bit out of the scope of this question. If you do have reporting services you may want to open a new topic and ask questions about it.
Otherwise just create a print style css file.
You can probably use the CSS #print Media Type to hide the stuff you don't want to print.
Check out the w3 Schools tutorial for a basic overview.
You can use CSS classes to define media type like #print, #screen and then mark appropriate parts of your webapge with those classes.
For the button to do the print, you will need to add: onClientClick="window.print()" to the button's definition.
Use CSS like this:
#media print
{
printOnly {display:block;}
screenOnly {display:none;}
}
#media screen
{
printOnly {display:none;}
screenOnly {display:block;}
}
Then simply decorate your DIVs or other elements with the classes:
<div class="screenOnly">this will not print but will show on screen</div> or
<div class="printOnly">this will not show on screen but will print</div>