JQuery Print Page

  • 1
  • Question
  • Updated 1 year ago
  • Answered
I have a page full of reports that I would like a user to be abel to print or save as a pdf. The issue is setting every section to it's own page. I came accross this plugin and wanted to see if anyone has had any success or if what I need can only be achieved via CSS. Thank you!

Has anyone had any success using this JQuery plugin? https://github.com/ianoxley/jqueryprintpage#readme
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Tami,

We just started using jQuery Print, which allows you to print the contents to a specific DOM. I imagine that you could accomplish printing each chart/section to a different page with that method.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
James,

You can save the jquery print code as a static resource, and then pull that into any squid pages where you want it.

What we do is throw all the elements that we want to print into a panel or wrapper, and give that a unique id... something like 'printThisSection.'

then put a button on your page to run the following javascript code:

skuid.$('#printThisSection').print()
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
I tried this by placing a button on the page. 

Button Snippet Name: PrintGraph
Static Resource Name: PrintGraph
Wrapper ID: printmediaID

This is the js code found in a zipped static resource: 

skuid.$('printmediaID').print()

Nothing happens when I click on the button. Any ideas how I can make this work?
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
You can't call a static resource as if it was a snippet. If you want to use a static resource (which is encouraged), you will have to register your snippet in that resource. I believe the syntax is something like this:
(function (skuid){
skuid.snippet.registerSnippet('PrintGraph',function(){
  skuid.$('printmediaID').print();
});
})(skuid);
you can name your static resource whatever you want. You just have to create a reference to it in the page builder. Then you can call 'PrintGraph' anywhere skuid asks for a snippet.

All that being said, I've moved away from jQuery Print, having found the print media CSS tags to be much more reliable.
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
Where can I find more info on the skuid print media CSS tags? Thanks!
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
I finally figured it out with CSS3!
(Edited)