Last active
February 27, 2024 21:21
-
-
Save mathiasrw/8710615 to your computer and use it in GitHub Desktop.
Ever wanted to print your Trello board? Export as JSON and paste it into the code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>True Trello Printer</title> | |
| <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body{margin:15%;} | |
| .panel-body{ | |
| font-size: 1.2em; | |
| } | |
| </style> | |
| <STYLE type="text/css" media="print"> | |
| body{margin:0;} | |
| </STYLE> | |
| </head> | |
| <body> | |
| <div id="out"> | |
| No Trello JSON data found | |
| </div> | |
| </ul> | |
| </div> | |
| <script type="text/html" id="template-output" > | |
| {{#lists}} | |
| <h1>Område: {{name}}</h1> | |
| {{#cards}} | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"><h4>{{name}}</h4>{{{desc}}}</div> | |
| <!--div class="panel-body" > | |
| </div--> | |
| <ul class="list-group"> | |
| {{#actions}} | |
| <li class="list-group-item"><tt style="color:gray;">{{date}} </tt> {{{text}}}</li> | |
| {{/actions}} | |
| </ul> | |
| </div> | |
| {{/cards}} | |
| <hr><br><br> | |
| {{/lists}} | |
| </script> | |
| <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js" type="text/javascript"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.0/marked.min.js | |
| " type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| function eatData(trelloJson){ | |
| var data = { | |
| board: trelloJson.name | |
| , | |
| lists: [] | |
| , | |
| ref: {} | |
| } | |
| for(i in trelloJson.lists){ | |
| var list = trelloJson.lists[i] | |
| if(list.closed){ | |
| //continue | |
| } | |
| data.ref[list.id] = { | |
| name: list.name | |
| , | |
| cards: [] | |
| } | |
| data.lists.push(data.ref[list.id]) | |
| } | |
| for(i in trelloJson.cards){ | |
| var card = trelloJson.cards[i] | |
| if(card.closed){ | |
| //continue | |
| } | |
| data.ref[card.id] = { | |
| name: card.name | |
| , | |
| desc: marked(card.desc) | |
| , | |
| actions: [] | |
| } | |
| data.ref[card.idList].cards.push(data.ref[card.id]) | |
| } | |
| for(i in trelloJson.actions){ | |
| var action = trelloJson.actions[i] | |
| if(action. type != "commentCard"){ | |
| continue | |
| } | |
| data.ref[action.id] = { | |
| text: marked(action.data.text) | |
| , | |
| date: moment(action.date).format('YYYY-MM-DD') | |
| } | |
| try{ | |
| data.ref[action.data.card.id].actions.push(data.ref[action.id]) | |
| } catch(e){} | |
| } | |
| return data; | |
| } | |
| function showData(data){ | |
| var template = $('#template-output').html() | |
| console.log(JSON.stringify(data,null,2)) | |
| $('#out').html(Mustache.render(template, data)) | |
| } | |
| function autorun() | |
| { | |
| if(null == data){ | |
| return alert('Please insert JSON data from Trello in the code') | |
| } | |
| showData(eatData(data)); | |
| } | |
| if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false); | |
| else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun); | |
| else window.onload = autorun; | |
| data = null; | |
| /* | |
| data = { | |
| "id": "52a9b37c0fc9b3", | |
| "name": "My board", | |
| "desc": "", | |
| "descData": null, | |
| "closed": false, | |
| "idOrganization": "502a0988d99341fe81a", | |
| "invited": false, | |
| "pinned": false, | |
| "starred": false, | |
| "url": "https://trello.com/b/fsvDkUV1/bec-f-rste-gang-the-movie", | |
| ...................... | |
| } | |
| //*/ | |
| </script> | |
| </body> | |
| </html> |
This is great, but it seems to show all cards, even those that are closed/archived. Is there a way to change that?
Super helpful. Thanks
This is excellent. Thanks so much. Is there a way I could hack this to process the JSON from just a card, rather than a board? I would find that really handy to keep archives of projects.
great!
Would be even better with option to import data directly from Trello site (HTTP GET) rather than having data as inline variable.
I may be missing something, but where am I pasting the JSON data?
very useful! thank you!
Really Cool.
Well done!
👏thanks
I fixed this up with a drag-n-drop interface and put it on github pages: https://github.com/arlyon/trello-to-pdf
As an update, you can now just plop the url of any public board ^
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Cool! I'll just add labels and it would be nice!