ritsc / printarea Goto Github PK
View Code? Open in Web Editor NEWjQuery plugin to print specified area of a page.
License: Other
jQuery plugin to print specified area of a page.
License: Other
Just a suggestion, but I'm fairly certain the demo could be hosted on github.
$(writeDoc).ready(function () {
printWindow.focus();
printWindow.print();
if (settings.mode == modes.popup && settings.popClose) {
setTimeout(function () { printWindow.close(); }, 2000);
}
});
Looks like you need to create a 2.4.2 git tag so bower picks up the latest version of PrintArea. Bower relies on tags to see the latest version of packages and is stuck on print-area 2.4.1 because the 2.4.2 tag does not exist. (See the lack of the 2.4.2 tag here: https://github.com/RitsC/PrintArea/tags )
I am trying to print using the Chrome browser always appears "Print preview Failed".
Chrome Version 46.0.2490.80
Hello could you please add it to bower (http://bower.io/) components, so we could install and update it easily ?
As we already do it with lots of jquery plugins.
Thank you,
Timur
I am using 4.2.1 version. If I print document which has anchor tags, the anchor tags are inactive in the print view. (i.e., unable to click the link in the print view).
I tried this in Chrome browser 44.0.2403.125. I am not sure about other browsers. Can anyone please help me to make the links clickable?
Thanks in advance.
The popup/iframe is pulling a lot of stylesheets from the original document, that I don't need in my popup.
As a suggestion, if you add an extra setting includeStyles : true,
Then you can adjust the getHead()
method to grab those stylesheets if includesStyles
is true.... which it would be by default, but would allow me to kill those stylesheets in a specific print dialog.
getHead : function() {
var extraHead = "";
var links = "";
if ( settings.extraHead ) settings.extraHead.replace( /([^,]+)/g, function(m){ extraHead += m });
if( settings.includeStyles ) {
$(document).find("link")
.filter(function(){ // Requirement: <link> element MUST have rel="stylesheet" to be considered in print document
var relAttr = $(this).attr("rel");
return ($.type(relAttr) === 'undefined') == false && relAttr.toLowerCase() == 'stylesheet';
})
.filter(function(){ // Include if media is undefined, empty, print or all
var mediaAttr = $(this).attr("media");
return $.type(mediaAttr) === 'undefined' || mediaAttr == "" || mediaAttr.toLowerCase() == 'print' || mediaAttr.toLowerCase() == 'all'
})
.each(function(){
links += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
});
}
if ( settings.extraCss ) settings.extraCss.replace( /([^,\s]+)/g, function(m){ links += '<link type="text/css" rel="stylesheet" href="' + m + '">' });
return "<head><title>" + settings.popTitle + "</title>" + extraHead + links + "</head>";
},
HI,
I'm having a hard time to make the plugin work with Chrome
This is the page:
http://dev.radioimagendigital.com/orden-de-servicio/
And this is the htapssword:
The print works flawlesly in most browsers, what I'm trying to do is to print a form with it's content, for this I create a new form with the contents loaded.
Here is the JS Code I'm using
jQuery("div.b1").click(function(){
var print = "";
jQuery("input.selPA:checked").each(function(){
print += (print.length > 0 ? "," : "") + ".content_orden_servicio" + jQuery(this).val();
});
var template_uri = '<?php echo get_template_directory_uri(); ?>';
jQuery(".content_orden_servicio").printArea({
mode : "iframe",
standard : "html5",
retainAttr : ["id","class"],
rintDelay : 500,
printAlert : true,
extraCss : 'http://dev.radioimagendigital.com/wp-content/themes/stability/print1.css'
});
//jQuery(".content_orden_servicio").printArea();
});
It's a wordpress website. Thanks for any help.
Forgive my bad English.
Hi
We hosted your lib on cdnjs (latest version 2.4.1)
However, we saw that there is latest version with 2.4.2 number in your changelog, but no git tag was add for it
Could you please add latest git tag for latest version in order to host it also on cdnjs?
Using PrintArea 2.4.0 version, we are unable to print web pages using Internet Explorer browser. We keep getting a blank page with ‘File not found’ message. This problem started after we installed security update released by Microsoft for Internet Explorer browser.
There was a security update for IE released by Microsoft on June 13, 2017 which mentions web page printing as a known issue in this security update.
Is this a known issue with PrintArea? Can you please let us know how this issue can be resolved?
Thanks,
Akhilesh
Hi,
how to print without preview?
Blank page is shown in print preview for google Chrome. Thus nothing is printed.
STEP TO REPRODUCE PROBLEM -
0. Go to this page in google CHROME, http://www.jqueryscript.net/demo/Print-Specified-Area-Of-A-Page-PrintArea/demo/
I've tried the test page on Android 4.2. and it's not working, the popup opens in a new browser tab but nothing happens, I have Google Cloud print installed
Hi
First of all, amazing work.
I am just having an issue that my page doesnt send the colors like on the demo where XYZ are red
I am using the latest jquery from cdn (//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js)
and the jquery.PrintArea.js
I am not using an external css file for the page where I want to print, could this be th eproblem?
Thanks
e.g. A4 portrait, A5 landscape etc
I tried
@page{size:A4 portrait}
Also tried
@media print and (width: 8.5in) and (height: 11in) { @page { margin: 1in; } }
None worked.
Pleas help.
Line 108 should be:
return '<div id="' +
It should include the element id as well. And probably style if that's there.
Trying to do print of a modal get entire body printed in ie10 & ie 11?
Hi,
.attr() will not change the 'checked' property the way it used to, at least not consistently among browsers and platforms. Instead now .prop() must be used:
http://api.jquery.com/prop/
You are using .attr() to change the 'checked' property on line 141:
if ( typeInput == "radio" || typeInput == "checkbox" ) copiedInput.attr( "checked", $(this).is(":checked") );
should now be:
if ( typeInput == "radio" || typeInput == "checkbox" ) copiedInput.prop( "checked", $(this).is(":checked") );
The same issue stands for 'selected' on line 145:
if ( $(this).is(":selected") ) $("option", copiedInput).eq( i ).attr( "selected", true );
should now be:
if ( $(this).is(":selected") ) $("option", copiedInput).eq( i ).prop( "selected", true );
To my knowledge, the other uses of .attr() in your code are ok.
PrintArea does not seem to be able to print table elements directly. They have to be wrapped in a div to work. Is this expected behaviour?
Cheers.
Suggested fix:
getFormData: function (ele) {
var copy = ele.clone();
var copiedInputs = $("input,select,textarea", copy);
$("input,select,textarea", ele).each(function (i) {
var typeInput = $(this).attr("type");
if ($.type(typeInput) === 'undefined') typeInput = $(this).is("select") ? "select" : $(this).is("textarea") ? "textarea" : "";
var copiedInput = copiedInputs.eq(i);
if (typeInput == "radio" || typeInput == "checkbox") copiedInput.attr("checked", $(this).is(":checked"));
else if (typeInput == "select")
$(this).find("option").each(function (i) {
if ($(this).is(":selected")) $("option", copiedInput).eq(i).attr("selected", true);
});
else if (typeInput == "textarea") copiedInput.text($(this).val());
else if (typeInput == "text" || typeInput == "") copiedInput.attr("value", $(this).val());
});
return copy;
},
This plugin does not working in Mac devices.
What is the issue
Would really like to use this plugin, but would require the licence to be updated -- preferably MIT. Thanks.
Hi!
I have started using this plugin and made a slight enhancement plus made it so that all css on the original page with media="all" were copied as well to the iframe or popup to print.
Here are my code changes:
popClose : false,
extraCss : '' };
var settings = {};//global settings
return (media == undefined || media.toLowerCase() == "" || media.toLowerCase() == "print" || media.toLowerCase() == "all" )
if ( settings.extraCss ){
for(i = 0; i < settings.extraCss.split(",").length; i++){
head+= '<link type="text/css" rel="stylesheet" href="' + settings.extraCss.split(",")[i] + '" >';
}
}
Using your Version 2.4.1 Copyright (C) 2013 release, this code does not process images in the Preview on Chrome version 55.0.2883.87 m. I do not see an updated version in your repository on jQuery.
I have already attempted to adjust the setTimeout, but this does not process the image in Preview. I've even set the timeout as far as 10000 and still no image.
How can this be fixed to work with the latest Chrome?
In Internet Explorer it prints the whole page not only the element. Tested in IE11 but it seems to happens in earlier versions too.
Using jQuery 1.10.2.
Thanks!
Would it be possible to change the printer's headers in iframe mode? In popup mode, the popTitle will be printed on the page (unless headers/footers are disabled) since it is that page's title meta). Could the same popTitle be applied in iframe mode?
My angular js Web application is working fine in dev environ ment as expected once its deployed to higher environment . While running/browsing the application in IE Edge the application by default selecting the 8 and my application is not working since ie 8 wont support angular js.
So tried changing the meta tag to override the compatable view setting in my code as follows
Trial `1)
**
Here in place of conent i tried with all possible options like
IE=edge","IE=11","IE=EmulateIE11","IE=10","IE=EmulateIE10","IE=9","IE=EmulateIE9
Trial 2)
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
I tried in all possible ways but while browsing the application by default it is selecting the ie mode 8 and application not working.
Note:
Before upgrading to i.e from 10 to IeEdge the application was up and running correctly with out any override compatability code
My hosted environment has compatiable view settings by default so am trying to override default setting by above trials but no luck.
In Fiddler Http response header i can see the X-UA-Compatible edge and in view source i can see the
Any suggestions or any issue with Edge or my code ?
FYI
Issue But my application opening in ie8 by default in higher environment ?
There seems to be some issue when printing a jquery dialog when the dialog is set to Modal=true. If it is false everything works well. It it is set to true then the entire page with the dialog on top is printed.
The IFrame is created correctly in the DOM.
I'm trying to create a print button that prints an item that isn't visible in the page.
<div style="display: none"><img src="FoesEnd.jpg" id="img2" alt="test" width="200"></div>
<button id="click_here">Print Hidden</button>
$("#click_here").click(function(){
$(this).prev().printArea();
});
However, the display none, comes through in the popup or iframe and so the print preview is blank.
While typing this, I've figured out that I can load a simple stylesheet to force everything to show
$("#click_here").click(function(){
$(this).prev().printArea({ mode: "popup", extraCss: "showAll.css" });
});
with the following CSS:
*{ display: block !important; }
But I'm still curious if this is the best approach.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.