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
Copy link

sebasira commented Jul 6, 2015

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

@practicalAaron
Copy link

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
Copy link

timtimmytim commented Apr 25, 2016

Super helpful. Thanks

@samrae
Copy link

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
Copy link

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
Copy link

expphoto commented Jul 15, 2016

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

@mateushideaki
Copy link

mateushideaki commented Sep 5, 2018

very useful! thank you!

@fabiovig
Copy link

fabiovig commented Feb 25, 2019

Really Cool.
Well done!

@rustamli
Copy link

rustamli commented Sep 4, 2019

👏thanks

@arlyon
Copy link

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
Copy link

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