Is there a way for JsReport to use Bootstrap CSS?
-
I'm trying to integrate the Bootstrap library to a template but to no avail it doesn't work. I tried the following methods:
- Import the bootstrap cdn
- Copy the whole bootstrap css and create a file in the assets folder
- Put the whole bootstrap css declaration in the <style> tag in the header
It still isn't working for me. Is there a way for me to use this library? Thank you in advance
-
Do you see issues also when using html recipe?
Are you aware that bootstrap has specific printing styles which are applied during pdf rendering and the output may look like different? See docs
https://jsreport.net/learn/phantom-pdf#twitter-bootstrap
-
Oh, I see. Will it work if I customize the bootstrap that I am downloading and remove all the media queries? All that I need is just the grid-system of bootstrap to properly layout the report that will be generated.
By the way, thanks for the quick reply @jan_blaha :)
-
Yes, this will work. However the question is that if it would not be faster for you to actually do the layout yourself.
The pdf rendering has usually static output size, you don't need any responsiveness like bootstrap provides.
It is up to you.
-
It still isn't working. So I have decided that I might as well just create the css-rules myself. Lol.
Again, thank you for your help @jan_blaha :)
-
I know that your question was a few month ago, but I'm using bootstrap by downloading a custom version in this link https://getbootstrap.com/docs/3.3/customize/?id=d2dd78313bd34670993c1c2fef6bf6b1, i unchecked the option call "Printing media style", and is working by now, at least is letting me to set the color style correctly.
This is the way i imported bootstrap in jsreport studio version 1.9.2
1.Upload the file bootstrap.min.css to assets
2.<style> {#asset bootstrap.min.css @encoding=utf8}</style>About the grid system, you could replace it by using table, is not the same but it could help, if you want you can see the invoice example using table here
I hope it helps someone.
-
Regarding the grid system, wouldn't it be better to check for the GRIDD CSS ? (supported even by IE 8 if I recall) not only would it be lighter but also you wouldn't depend to external media (haven't tested it yet, but should be available at least for Chrome and Electron receipes I think)
Edit : Actually tested it from the example, it does work on Chrome-pdf (thought alpha (rgba) seems to not work proprely)
https://playground.jsreport.net/studio/workspace/rkYnTvA4z/1
-
Okay, and more help needed. I don't know what I"m doing wrong.
In my assets folder, I have a bootstrap folder. In that folder, I put bootstrap.css and bootstrap.js. On my page in question I have
<script>
{#asset bootstrap @encoding=utf8}
</script>But I get the error:
Error occured - Error during rendering report: Asset bootstrap not found
Stak - Error: Asset bootstrap not found
at C:\dev\src\apps\JsReports\node_modules\jsreport-assets\lib\assets.js:149:15
at tryCatcher (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\promise.js:510:31)
at Promise._settlePromise (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\promise.js:567:18)
at Promise._settlePromise0 (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\promise.js:612:10)
at Promise._settlePromises (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\promise.js:691:18)
at Async._drainQueue (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\async.js:133:16)
at Async._drainQueues (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\async.js:143:10)
at Immediate.Async.drainQueues (C:\dev\src\apps\JsReports\node_modules\jsreport-fs-store\node_modules\listener-collection\node_modules\bluebird\js\release\async.js:17:14)
at runCallback (timers.js:651:20)
at tryOnImmediate (timers.js:624:5)
at processImmediate [as _immediateCallback] (timers.js:596:5)I used npm install bootstrap in the terminal window of WebStorm to install bootstrap but jsReports acts like it isn't there. What am I doing wrong?
Thanks!
edg
-
In my assets folder, I have a bootstrap folder. In that folder, I put bootstrap.css and bootstrap.js. On my page in question I have
I used npm install bootstrap in the terminal window of WebStorm to install bootstrap but jsReports acts like it isn't there. What am I doing wrong?
have you registered both files using the jsreport studio ui? if yes, then your only problem seems to be that you are not using the right name in the asset call. it should be:
<script> {#asset bootstrap.js @encoding=utf8} </script>
-
I'm actually using WebStorm as the IDE, not the jsreport studio ui. Do I have to do it there?
I installed bootstrap via WebStorm terminal with a standard npm install bootstrap and it put it in the node_modules directory. Does it need to be installed/moved to the assets directory?
Thanks!
-
I'm actually using WebStorm as the IDE, not the jsreport studio ui. Do I have to do it there?
yes, you have to do it there, using the jsreport studio ui, you should upload the bootstrap.css and bootstrap.js file using the assets upload ui of jsreport studio. whatever you upload with the ui will be moved to the assets directory.
the ui step is needed because we do other things with the asset file (for example we register the asset internally in the jsreport store for future reference), however in the future we are likely to make it more easy to use an asset, just by dropping the file in some folder and automatically recognizing it, but for now you need to register the asset with jsreport studio.
