Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ever wanted to print your Trello board? Export as JSON and paste it into the code.
<!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>
@sebasira

This comment has been minimized.

Copy link

@sebasira sebasira commented Jul 6, 2015

Cool! I'll just add labels and it would be nice!

@practicalAaron

This comment has been minimized.

Copy link

@practicalAaron practicalAaron commented Mar 30, 2016

This is great, but it seems to show all cards, even those that are closed/archived. Is there a way to change that?

@timtimmytim

This comment has been minimized.

Copy link

@timtimmytim timtimmytim commented Apr 25, 2016

Super helpful. Thanks

@samrae

This comment has been minimized.

Copy link

@samrae samrae commented Apr 28, 2016

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.

@bartosz-bilicki

This comment has been minimized.

Copy link

@bartosz-bilicki bartosz-bilicki commented Jul 5, 2016

great!

Would be even better with option to import data directly from Trello site (HTTP GET) rather than having data as inline variable.

@expphoto

This comment has been minimized.

Copy link

@expphoto expphoto commented Jul 15, 2016

I may be missing something, but where am I pasting the JSON data?

@mateushideaki

This comment has been minimized.

Copy link

@mateushideaki mateushideaki commented Sep 5, 2018

very useful! thank you!

@fabiovig

This comment has been minimized.

Copy link

@fabiovig fabiovig commented Feb 25, 2019

Really Cool.
Well done!

@rustamli

This comment has been minimized.

Copy link

@rustamli rustamli commented Sep 4, 2019

👏thanks

@arlyon

This comment has been minimized.

Copy link

@arlyon arlyon commented Feb 26, 2020

I fixed this up with a drag-n-drop interface and put it on github pages: https://github.com/arlyon/trello-to-pdf

@arlyon

This comment has been minimized.

Copy link

@arlyon arlyon commented Sep 16, 2020

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
You can’t perform that action at this time.