|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Demo - Papa Parse</title>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
|
|
|
|
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Lato:300,400,700,900|Arvo">
|
|
|
|
|
<link rel="stylesheet" href="/resources/css/unsemantic.css">
|
|
|
|
|
<link rel="stylesheet" href="/resources/css/common.css">
|
|
|
|
|
<link rel="stylesheet" href="/resources/css/demo.css">
|
|
|
|
|
<script src="/resources/js/jquery.min.js"></script>
|
|
|
|
|
<script src="/resources/js/papaparse.js"></script>
|
|
|
|
|
<script src="/resources/js/common.js"></script>
|
|
|
|
|
<script src="/resources/js/demo.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<div class="grid-container">
|
|
|
|
|
<div class="grid-40 mobile-grid-50">
|
|
|
|
|
<div class="links">
|
|
|
|
|
<a href="https://github.com/mholt/PapaParse">
|
|
|
|
|
<i class="fa fa-github fa-lg"></i> GitHub
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/demo.html">
|
|
|
|
|
<i class="fa fa-magic fa-lg"></i> Demo
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/docs.html">
|
|
|
|
|
<i class="fa fa-book fa-lg"></i> Docs
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-20 hide-on-mobile text-center">
|
|
|
|
|
<a href="/" class="text-logo">Papa Parse</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-40 mobile-grid-50 text-right">
|
|
|
|
|
<div class="links">
|
|
|
|
|
<a href="/faq.html">
|
|
|
|
|
<i class="fa fa-question fa-lg"></i> FAQ
|
|
|
|
|
</a>
|
|
|
|
|
<a href="https://github.com/mholt/PapaParse/issues">
|
|
|
|
|
<i class="fa fa-bug fa-lg"></i> Issues
|
|
|
|
|
</a>
|
|
|
|
|
<a href="https://www.gittip.com/mholt/" class="donate">
|
|
|
|
|
<i class="fa fa-heart fa-lg"></i> Donate
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
<div class="grid-container">
|
|
|
|
|
<div class="grid-100">
|
|
|
|
|
<h2>Try Papa Parse</h2>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid-75 push-25 grid-parent text-center">
|
|
|
|
|
<div class="grid-container">
|
|
|
|
|
<div class="grid-25">
|
|
|
|
|
<div class="tab active" id="tab-string">String</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-25">
|
|
|
|
|
<div class="tab" id="tab-local">Local file(s)</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-25">
|
|
|
|
|
<div class="tab" id="tab-remote">Remote file</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid-25">
|
|
|
|
|
<div class="tab" id="tab-unparse">JSON to CSV</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
|
|
|
|
|
<div class="grid-100">
|
|
|
|
|
|
|
|
|
|
<div class="input-area" id="input-string">
|
|
|
|
|
|
|
|
|
|
<textarea id="input" placeholder="String input">Column 1,Column 2,Column 3,Column 4
|
|
|
|
|
1-1,1-2,1-3,1-4
|
|
|
|
|
2-1,2-2,2-3,2-4
|
|
|
|
|
3-1,3-2,3-3,3-4
|
|
|
|
|
4,5,6,7</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-area" id="input-local">
|
|
|
|
|
<p><b>Choose one or more delimited text files for Papa to parse.</b></p>
|
|
|
|
|
|
|
|
|
|
<input type="file" id="files" multiple>
|
|
|
|
|
|
|
|
|
|
<br><br>
|
|
|
|
|
Or use one of these:
|
|
|
|
|
<br>
|
|
|
|
|
<a href="/resources/files/normal.csv" id="local-normal-file">Normal file</a>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="/resources/files/big.csv" id="local-large-file">Large file</a>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="/resources/files/malformed.tsv" id="local-malformed-file">Malformed file</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-area" id="input-remote">
|
|
|
|
|
<p>
|
|
|
|
|
<b>Type the URL of the file to be downloaded and parsed.</b>
|
|
|
|
|
<br><small>(cross-origin requests must receive Access-Control-Allow-Origin header)</small>
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<input type="text" id="url" placeholder="URL">
|
|
|
|
|
<br><br>
|
|
|
|
|
Or use one of these:
|
|
|
|
|
<br>
|
|
|
|
|
<a href="javascript:" id="remote-normal-file">Normal file</a>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="javascript:" id="remote-large-file">Large file</a>
|
|
|
|
|
<br>
|
|
|
|
|
<a href="javascript:" id="remote-malformed-file">Malformed file</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-area" id="input-unparse">
|
|
|
|
|
<p><b>Paste a valid JSON string to convert to CSV.</b></p>
|
|
|
|
|
<textarea id="json" placeholder="JSON string">[
|
|
|
|
|
{
|
|
|
|
|
"Column 1": "1-1",
|
|
|
|
|
"Column 2": "1-2",
|
|
|
|
|
"Column 3": "1-3",
|
|
|
|
|
"Column 4": "1-4"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"Column 1": "2-1",
|
|
|
|
|
"Column 2": "2-2",
|
|
|
|
|
"Column 3": "2-3",
|
|
|
|
|
"Column 4": "2-4"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"Column 1": "3-1",
|
|
|
|
|
"Column 2": "3-2",
|
|
|
|
|
"Column 3": "3-3",
|
|
|
|
|
"Column 4": "3-4"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"Column 1": 4,
|
|
|
|
|
"Column 2": 5,
|
|
|
|
|
"Column 3": 6,
|
|
|
|
|
"Column 4": 7
|
|
|
|
|
}
|
|
|
|
|
]</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<i class="see-results">Results will show up in the console of your browser's inspector tools.</i>
|
|
|
|
|
<br>
|
|
|
|
|
<button id="submit" class="green">Parse</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="grid-25 pull-75 config">
|
|
|
|
|
<label><input type="checkbox" id="stream"> Stream</label>
|
|
|
|
|
<dfn>The file is loaded in chunks and results are delivered row-by-row during parsing. Saves memory and prevents crashes.</dfn>
|
|
|
|
|
|
|
|
|
|
<label><input type="checkbox" id="worker"> Worker thread</label>
|
|
|
|
|
<dfn>Runs the parser in a separate thread so the web page doesn't lock up.</dfn>
|
|
|
|
|
|
|
|
|
|
<label><input type="checkbox" id="header"> Header row</label>
|
|
|
|
|
<dfn>Keys data by field name rather than an ordered array.</dfn>
|
|
|
|
|
|
|
|
|
|
<label><input type="checkbox" id="dynamicTyping"> Dynamic typing</label>
|
|
|
|
|
<dfn>Turns numeric data into numbers and true/false into booleans.</dfn>
|
|
|
|
|
|
|
|
|
|
<label>Delimiter: <input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"> <a href="javascript:" id="insert-tab">use tab</a></label>
|
|
|
|
|
<dfn>The delimiting character. Usually comma or tab. Default is comma.</dfn>
|
|
|
|
|
|
|
|
|
|
<label>Preview: <input type="number" min="0" max="1000" placeholder="0" id="preview"></label>
|
|
|
|
|
<dfn>If > 0, stops parsing after this many rows.</dfn>
|
|
|
|
|
|
|
|
|
|
<label>Encoding: <input type="text" id="encoding" placeholder="default" size="7"></label>
|
|
|
|
|
<dfn>Only applies when reading local files. Default is specified by the browser (usually UTF-8).</dfn>
|
|
|
|
|
|
|
|
|
|
<label>Comment char: <input type="text" size="7" maxlength="1" placeholder="default" id="comments"></label>
|
|
|
|
|
<dfn>If specified, skips lines starting with this character.</dfn>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
|
|
|
|
|
<div class="grid-100 text-center pad-50">
|
|
|
|
|
<hr>
|
|
|
|
|
<a href="https://github.com/mholt/PapaParse" class="button">
|
|
|
|
|
<i class="fa fa-download"></i> Get Papa Parse on GitHub
|
|
|
|
|
</a>
|
|
|
|
|
<a href="/docs.html" class="button red">
|
|
|
|
|
<i class="fa fa-book"></i> Documentation
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<div class="grid-container">
|
|
|
|
|
<div class="grid-100 text-center">
|
|
|
|
|
© 2013-2014
|
|
|
|
|
<br>
|
|
|
|
|
Thanks to all <a href="https://github.com/mholt/jquery.parse/graphs/contributors">contributors</a>!
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
