-1

I've followed this answer to print a specific element of a view and it works great, but without CSS styling. I want to print a bootstrap table with some fields, nothing too fancy. This is the code I ended up using:

function printDiv(divId) {
  window.frames["print_frame"].document.body.innerHTML= $("." + divId).html();
  window.frames["print_frame"].window.focus();
  window.frames["print_frame"].window.print();
}

The answer has an extra part where it declares this:

printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')

And later concatenates in the html as follows:

printDivCSS + $("." + divId).html()

I've added a scss file but it doesn't properly show the bootstrap table, which seems reasonable since it is not defined in that sass file (although other thins are defined and are shown properly).

So the real question should be: how can I properly print a bootstrap table with its css formatting? It is printing the correct information ATM, but it is pretty ugly.

The application is a rails application. In which I have all css files under:

add/assets/stylesheets

I need to include bootstrap assets. I have the following file:

bootstrap_and_override.css.less

@import "twitter/bootstrap/bootstrap";
// Glyphicons
@import "twitter/bootstrap/glyphicons.less";

I tried doing:

printDivCSS = new String ('<link href="bootstrap_and_overrides.css.less" rel="app/assets/stylesheet">')

In a similar fashion as before but it is not working either.

Community
  • 1
  • 1
fedest
  • 1,190
  • 3
  • 15
  • 35
  • That link is looking for the css file to apply the print styles, you need to have that file? Also, you say you have an error, what is the actual error? – ajmajmajma Sep 20 '16 at 15:40
  • Just edited the question with updated info – fedest Sep 20 '16 at 15:46
  • You can't give it a scss file, you need to give it a processed css file, it's not going to process it for you. sass, scss, less and all that are css pre-processers and are run through a process that compiles them to css. You need to provide a plain css file to that link line. I would suggest just making a fresh css file just for this print table - that's what is done most of the time in my experience. – ajmajmajma Sep 20 '16 at 15:47
  • Okay, what if I don't have a simple css file? If i just do a `window.print();` via javascript without selecting anything or doing anything special, it prints the table properly, but it prints many other stuff which I don't want to print. – fedest Sep 20 '16 at 15:52
  • Then you make one? You need a single css file to feed to that link so you can apply those styles to print with. – ajmajmajma Sep 20 '16 at 15:55
  • Sory, just edited last comment. Don't I need to include all the bootstrap things in that css I need to create? – fedest Sep 20 '16 at 15:56
  • You include the styles of whatever you want styled, so if it's a bootstrap table you want the bootstrap table styles probably. That window print works because it is looking at the **entire** document which includes your all the css files you have. If you were being super lazy you could just include all of your css files in the print. – ajmajmajma Sep 20 '16 at 15:58
  • Not to be lazy, but it would be really useful if I can just include all .css, or at least know how to include the bootstrap ones because I can't manage to do it. Can you tell me how to do this? – fedest Sep 20 '16 at 16:12
  • just modify that `printDivCSS ` to include all your style sheets – ajmajmajma Sep 20 '16 at 16:13
  • Well the question is how do I tell it to include all files? – fedest Sep 20 '16 at 16:25
  • I added an answer, let me know if you have any further issues. – ajmajmajma Sep 21 '16 at 17:46

1 Answers1

0

The lazy solution, as discussed in comments is to add all the files. You'd do so like this 

printDivCSS = new String ('<link href="file1.css" rel="stylesheet" type="text/css"><link href="file2.css" rel="stylesheet" type="text/css"><link href="file3.css" rel="stylesheet" type="text/css">');

I don't know where or what css files you use, you'd just swap the paths to the real ones you are using in your project.

Edit for examples sake:

Lets just say for example you are using a bootstrap cdn. Then what you would have would be someting like this -

printDivCSS = new String ('<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">

So you would just change that href to point to whereever you have your bootstrap, or to whatever CDN you are using. IF you have multiple css files, just add another link. Please also note that cdn is using a css file, not sass/less/scss/whatever, as those are CSS pre-processors that need to be compiled to css before the browser can read them.

All you are doing here is giving your css file to the print document, in the same way you would put the <link> tags in the header of your index.html.

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • This didn't help me. I need to include the css that comes with bootstrap – fedest Sep 22 '16 at 15:38
  • @FedericoEsteban I don't know your paths or how you are bringing in those files, as you have not provided any of that information, so what I have done is give you an example of how you would do it. You need to fill in those `href=` with the proper urls or paths you are using. So if you are using for example 5 css files, you would provide 5 `` in that variable and give them the correct paths/urls. That link is loading the css into your print file just like you do in your header in html... same idea. – ajmajmajma Sep 22 '16 at 15:52
  • @FedericoEsteban just to clarify, if you are copy an pasting this answers provided code in, it will not work. You need to modify it to your needs, it's just an example. If you provide the links or paths to your required css files, I can modify it for you. – ajmajmajma Sep 22 '16 at 15:58
  • Sorry for the misinformation, I've edited the information to include that. – fedest Sep 22 '16 at 17:00
  • @FedericoEsteban 2 problems with what you have provided. 1. - **you cannot use a less/sass/scss/whatever file** it **has** to be a css file, you may want to look into this to understand why. I would suggest you start with this and figuire out how to get a css file for your page. 2 - **you need a relative path or url** , so if you are saying `href=bootstrap_and_overrides.css.less"` you are saying you have a file called `bootstrap_and_overrides.css.less` in the same directory as this html file. – ajmajmajma Sep 22 '16 at 17:09
  • Thanks for the patience. Would this work if I copied all the needed css from bootstrap to a css file in my directory app/assets/stylesheets? – fedest Sep 22 '16 at 17:28
  • @FedericoEsteban I have no idea what you're doing by changing the rel to be honest. You can just use rel="styleshee" then the href is the path... It doesn't matter how you get the css, you just need an actual **valid** css file. – ajmajmajma Sep 22 '16 at 17:30