ritsc / printarea Goto Github PK

View Code? Open in Web Editor NEW

264.0 264.0 163.0 825 KB

jQuery plugin to print specified area of a page.

License: Other

CSS 8.20% JavaScript 91.80%

printarea's People

Contributors

Stargazers

Watchers

Forkers

reinteractive-open baike0627 catouse bauschan leelam jer-gallagher-oe rotrer rdcs vdespa dk4mts ismyrnow ndinhphi warzonevi joaquinobed juniorriau fresh-d finaleaf sgit-chibui omikronuk jonokhor wangjiangshan benoitlemyre marioravel sumekey daudmabena baranikumar macvim mbaranov leejun0326 hazelf386 zhangdinet goshmx snowattitudes edsonf premjawariya yanguanglan lixunguan dejobo ccys xdevmaycry apolakipso dsbaars aluda yuanxj1024 vastrek jacken159 go2feel songguang-2010 work0120 hesling mantiswang eugenez daguike sandrospreiter jquery-collection ranfu 05ttxx paddil rajibjava miguelcobain kgram dihihi dkrey xiaoche madhavmahesh amwson2008 weslielee vebin exdestroyer steve-nickerson iamxiaoxiong quyaoshun azraelrabbit ezequiel9 cristhiangrojas pody2015 dexterogieosahon masonming arvinqi andrew8305 blazefluz jhsilva007 14686039 aghalan yanshaozhi marlboro029 hunx qfy081 artskin jjdelrom hbjeff nerdstor enenemultimedia banyingli veriito28 abelkoo geofmureithi-zz ljnchn cnluderson dh-alt

printarea's Issues

Move demo to github pages

Just a suggestion, but I'm fairly certain the demo could be hosted on github.

setInterval needed (when popup close used in Chrome)

    $(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 )

Print preview failed on Chrome

I am trying to print using the Chrome browser always appears "Print preview Failed".

Chrome Version 46.0.2490.80

Add to bower

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

Anchor tag is inactive in the Print view

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.

Way to kill stylesheets

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>";
        },

Blank page on Chrome

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.

cdnjs hosting

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?

Print is not working in IE after Microsoft's security update

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.

https://support.microsoft.com/en-us/help/4021558/cumulative-security-update-for-internet-explorer-june-13-2017

https://support.microsoft.com/en-us/help/4032782/a-blank-page-or-404-error-prints-when-you-try-to-print-a-frame-in-ie

Is this a known issue with PrintArea? Can you please let us know how this issue can be resolved?

Thanks,
Akhilesh

print directly without preview

Hi,
how to print without preview?

Printing not working in CHROME.

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/

call .printArea with popup mode. it will show a chrome print preview.
That preview has nothing in it. So close it.
NOW you will see the popup of text to be printed. Press ctrl + p to print that text. Prints successfully.

Not working on Android

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

Print no colors

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

Can I force the paper size?

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.

Bug in creating body

Line 108 should be:

return '<div id="' + $(printElement).attr("id") + '" class="' + $(printElement).attr("class") + '">' + $(printElement).html() + '';

It should include the element id as well. And probably style if that's there.

Ie10 modal prints entire body content?

Trying to do print of a modal get entire body printed in ie10 & ie 11?

jQuery change in .attr() use to .prop()

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.

Printing tables

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.

Inputs lacking default [type="text"] will not include value

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;
    },

Plugin not working in IPad and mac devices.

This plugin does not working in Mac devices.

What is the issue

Licence

Would really like to use this plugin, but would require the licence to be updated -- preferably MIT. Thanks.

extra css + copy also css with media="all"

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 | [boolean] | (false),true | popup window close after printing
@extraCss | [string] | (''), "http://www.liu.se/mall11/css/print-news.css,http://www.liu.se/mall11/css/another-css.css" | Komma separated list of extra css files to load in the section of the popup or iframe

             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] + '" >';
}
}

No Chrome Image

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?

Internet Explorer

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!

Use popTitle in iframe mode

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?

Strange IE Edge Compatible issue with angular Js

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 ?

Printing a JQuery Dialog in IE 10

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.

Print hidden item

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.