Skip to content

Instantly share code, notes, and snippets.

@mathiasrw
Last active February 27, 2024 21:21
Show Gist options
  • Save mathiasrw/8710615 to your computer and use it in GitHub Desktop.
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.
<!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>
@expphoto
Copy link

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

@mateushideaki
Copy link

very useful! thank you!

@fabiovig
Copy link

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