Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

576 lines
18 KiB

<!DOCTYPE html>
<html>
<head>
<title>Papa Parse - Powerful CSV Parser for JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="theme-color" content="#ffffff">
<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=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
<link rel="stylesheet" href="/resources/css/unsemantic.css">
<link rel="stylesheet" href="/resources/css/tomorrow.highlight.css">
<link rel="stylesheet" href="/resources/css/common.css">
<link rel="stylesheet" href="/resources/css/home.css">
<script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/skrollr.min.js"></script>
<script src="/resources/js/highlight.min.js"></script>
<script src="/resources/js/lovers.js"></script>
<script src="/resources/js/common.js"></script>
<script src="/resources/js/home.js"></script>
</head>
<body>
<div id="skrollr-body">
<div id="top" data-top="bottom: 0px; opacity: 1;" data-top-bottom="bottom: -350px; opacity: .3;">
<div class="grid-container">
<div class="grid-100">
<div id="title-main">
<h1>Papa Parse</h1>
<h2>The powerful, in-browser CSV parser for big boys and girls</h2>
<a href="https://github.com/mholt/PapaParse/archive/5.0.2.zip" class="button">
<i class="fa fa-download"></i>&nbsp; Download
</a>
<a href="/demo" class="button red">
<i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
<div id="title-code">
<pre><code class="language-javascript">// Parse CSV string
var data = Papa.parse(csv);
// Convert back to CSV
var csv = Papa.unparse(data);
// Parse local CSV file
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
// Stream big file in worker thread
Papa.parse(bigFile, {
worker: true,
step: function(results) {
console.log("Row:", results.data);
}
});</code></pre>
</div>
</div>
</div>
</div>
<main>
<header>
<div class="grid-container">
<div class="grid-40 mobile-grid-50">
<div class="links">
<a href="/demo">
<i class="fa fa-magic fa-lg"></i> Demo
</a>
<a href="/docs">
<i class="fa fa-book fa-lg"></i> Docs
</a>
<a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse 5</a>
</div>
<div class="grid-40 mobile-grid-50 text-right">
<div class="links">
<a href="https://github.com/mholt/PapaParse">
<i class="fa fa-github fa-lg"></i> GitHub
</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">
<i class="fa fa-stack-overflow fa-lg"></i> Help
</a>
</div>
</div>
</div>
</header>
<div class="insignia">
<div class="firefox-hack"><div id="version-intro">Version</div><div id="version">5.0</div></div>
</div>
<section style="padding-top: 0;">
<div class="grid-container">
<div class="grid-100">
<h3>Features</h3>
</div>
</div>
<div id="ticker">
<div class="ticker-item current">
<p>Now the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest</a> JavaScript CSV parser for the browser</p>
</div>
<div class="ticker-item">
<p>The world's first multi-threaded CSV parser for the browser</p>
</div>
<div class="ticker-item">
<p>Papa can handle files gigabytes in size without crashing</p>
</div>
<div class="ticker-item">
<p>Use Papa when performance, privacy, and correctness matter to you</p>
</div>
<div class="ticker-item">
<p>Papa alleviates privacy concerns related to uploading files</p>
</div>
<div class="ticker-item">
<p>Malformed CSV is handled gracefully with a detailed error report</p>
</div>
</div>
<div class="grid-container">
<div class="grid-33">
<li>CSV&#8594;JSON and <a href="#unparse">JSON&#8594;CSV</a></li>
<li>Auto-detect <a href="#delimiter">delimiter</a></li>
<li><a href="#local-files">Open local files</a></li>
<li><a href="#remote-files">Download remote files</a></li>
</div>
<div class="grid-33">
<li><a href="#stream">Stream</a> local and remote files</li>
<li><a href="#worker">Multi-threaded</a></li>
<li><a href="#header">Header row</a> support</li>
<li><a href="#type-conversion">Type conversion</a></li>
</div>
<div class="grid-33">
<li>Skip <a href="#comments">commented lines</a></li>
<li>Fast mode</li>
<li>Graceful <a href="#errors">error</a> handling</li>
<li>Optional <a href="#jquery">sprinkle</a> of jQuery</li>
</div>
<div class="clear"></div>
<br>
<br>
<div class="grid-100 text-center">
<a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-github"></i>&nbsp; GitHub
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
</div>
</section>
<section>
<div class="grid-container">
<div class="grid-100 text-center">
<h3>People <i class="fa fa-heart"></i> Papa</h3>
</div>
<div class="grid-100 text-center">
<br>
<p>
<a href="https://www.npmjs.com/package/papaparse">
<img
src="https://img.shields.io/npm/dm/papaparse.svg"
alt="PapaParse"
/>
</a>
&nbsp;
<a href="https://www.npmjs.com/package/react-papaparse">
<img
src="https://img.shields.io/npm/dt/papaparse.svg?label=total%20downloads"
alt="PapaParse"
/>
</a>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="https://smartystreets.com">SmartyStreets</a> verifies addresses, many of which are in CSV files. Papa Parse can process huge files in the browser. <i>"We rapidly built an awesome client-side file processor with Papa Parse."</i>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="http://jannah.github.io/MetaReader/">MetaReader</a> helps you see your data from a meta level before you start detailed analysis. <i>"Papa Parse made it very easy to load and ready user CSV files in the browser on the client side."</i>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="http://jannah.github.io/MetaReader/">EpiML</a> is an agent-based mathematical model for the web, still in its early stages of development. <i>"Papa makes it so easy to use CSV, which is good for scientists."</i>
</p>
</div>
<div class="clear"></div>
<div class="grid-100 text-center">
<br>
<b><a href="https://github.com/mholt/PapaParse/blob/master/docs/resources/js/lovers.js" class="add-lover-link subheader"><i class="fa fa-plus-square"></i> Add your link (it's free)</a></b>
</div>
</div>
</section>
<section id="parse">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>CSV Parsing</h4>
<h5>"Isn't parsing CSV just <code>String.split(',')</code>?"</h5>
<p>Heavens, no. Papa does it right. Just pass in the CSV string with an optional <a href="/docs#config">configuration</a>.</p>
<pre><code class="language-javascript">var results = Papa.parse(csvString, <a href="/docs#config">config</a>);
/*
results = {
data: [ ... ], // parsed data
errors: [ ... ], // errors encountered
meta: { ... } // extra parse info
}
*/</code></pre>
</div>
</div>
</section>
<section id="delimiter">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Delimiter Detection</h4>
<h5>"But I don't know the delimiter..."</h5>
<p>That's okay. Papa will scan the first few rows to find the right delimiter.</p>
<pre><code class="language-javascript">var results = Papa.parse(csvString);
console.log(results.meta.delimiter);
// "\t"</code></pre>
</div>
</div>
</section>
<section id="local-files">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Local Files</h4>
<h5>"Great, but I have a <i>file</i> to parse."</h5>
<p>Then give Papa a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> instead of a string. Since file parsing is asynchronous, don't forget a callback.</p>
<pre><code class="language-javascript">Papa.parse(fileInput.files[0], {
complete: function(results) {
console.log(results);
}
});</code></pre>
</div>
</div>
</section>
<section id="remote-files">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Remote Files</h4>
<h5>"No&mdash;I mean, the file isn't on my computer."</h5>
<p>Oh, well then just pass in the URL and&mdash;of course&mdash;a callback.</p>
<pre><code class="language-javascript">Papa.parse("http://example.com/file.csv", {
download: true,
complete: function(results) {
console.log(results);
}
});</code></pre>
</div>
</div>
</section>
<section id="stream">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Streaming</h4>
<h5>"Did I mention the file is huge?"</h5>
<p>That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.</p>
<pre><code class="language-javascript">Papa.parse("http://example.com/big.csv", {
download: true,
step: function(row) {
console.log("Row:", row.data);
},
complete: function() {
console.log("All done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="worker">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Multi-Threading</h4>
<h5>"Lovely. Now my web page locked up."</h5>
<p>That happens when a long-running script is executing in the same thread as the page. Use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker</a> thread by specifying <code>worker: true</code>. It may take slightly longer, but your page will stay reactive.</p>
<pre><code class="language-javascript">Papa.parse(bigFile, {
worker: true,
step: function(row) {
console.log("Row:", row.data);
},
complete: function() {
console.log("All done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="header">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Header Row</h4>
<h5>"Great! Now I want data keyed by field name."</h5>
<p>If you tell Papa there is a header row, each row will be organized by field name instead of index.</p>
<pre><code class="language-javascript">// Key data by field name instead of index/position
var results = Papa.parse(csv, {
header: true
});</code></pre>
</div>
</div>
</section>
<section id="type-conversion">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Type Conversion</h4>
<h5>"Hey, these numbers are parsed as strings."</h5>
<p><i>Everything</i> is parsed as strings. If you want numbers and booleans, you can enable dynamic typing to do the conversion for you.</p>
<pre><code class="language-javascript">// Converts numeric/boolean data
var results = Papa.parse(csv, {
dynamicTyping: true
});</code></pre>
</div>
</div>
</section>
<section id="comments">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Comments</h4>
<h5>"I forgot to mention: my CSV files have comments in them."</h5>
<p>Okay, first off: that's really weird. But fortunately, you can skip those lines... just specify the comment string.</p>
<pre><code class="language-javascript">// Mostly found in academia, some CSV files
// may have commented lines in them
var results = Papa.parse(csv, {
comments: "#"
});</code></pre>
</div>
</div>
</section>
<section id="errors">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Error Handling</h4>
<h5>"Aw, shoot. Errors."</h5>
<p>Papa handles errors pretty well. The <a href="http://tools.ietf.org/html/rfc4180">CSV standard</a> is somewhat <strike>loose</strike> ambiguous, so Papa is designed for edge cases. For example, mismatched fields won't break parsing.</p>
<pre><code class="language-javascript">// Example error:
{
type: "FieldMismatch",
code: "TooManyFields",
message: "Expected 3 fields, but parsed 4",
row: 1
}</code></pre>
</div>
</div>
</section>
<section id="jquery">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>jQuery Plugin</h4>
<h5>"Can I use Papa with jQuery?"</h5>
<p>Sure, but it's not required. You can use jQuery to select file input elements and then parse their files. Papa exposes its file parsing API as a jQuery plugin only when jQuery is defined. Papa Parse has <b>no dependencies</b>.</p>
<pre><code class="language-javascript">$("input[type=file]").parse({
config: {
complete: function(results, file) {
console.log("This file done:", file, results);
}
},
complete: function() {
console.log("All files done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="unparse">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>JSON to CSV</h4>
<h5>"Last thing: what about converting JSON to CSV?"</h5>
<p>Call <code>unparse()</code> instead of <code>parse()</code>, passing in your array of arrays or array of objects. Papa will figure it out.</p>
<pre><code class="language-javascript">// Output is a properly-formatted CSV string.
// See <a href="/docs#json-to-csv">the docs</a> for more configurability.
var csv = Papa.unparse(yourData);</code></pre>
</div>
</div>
</section>
<section id="download">
<div class="grid-container">
<div class="grid-100">
<h3>Who's Your Papa?</h3>
</div>
<div class="grid-45 suffix-5 mini-papa">
<p>
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a></b>
(minified) for production use
</p>
</div>
<div class="grid-45 prefix-5">
<p>
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a></b>
(un-minified) for development
</p>
</div>
<div class="clear"></div>
<div class="prefix-30 grid-40 suffix-30">
<b style="display: block; text-align: center;">npm</b>
<pre><code class="language-bash">$ npm install papaparse</code></pre>
<br>
<b style="display: block; text-align: center;">bower</b>
<pre><code class="language-bash">$ bower install papaparse</code></pre>
</div>
<div class="clear"></div>
<div class="grid-100 text-center">
<br><br>
<a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-github"></i>&nbsp; GitHub
</a>
<a href="/demo" class="button red">
<i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
</div>
</section>
</main>
<footer>
<!--<div class="footer-top">
<h3>Make Your Papa Proud</h3>
<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
</div>-->
<div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2019
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Learn</h5>
<a href="/demo">Demo</a>
<a href="/docs">Documentation</a>
<a href="/faq">FAQ</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Project</h5>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
<a href="https://github.com/mholt/PapaParse">GitHub</a>
<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
</div>
<div class="clear hide-on-desktop"></div>
<div class="grid-15 mobile-grid-50 links">
<h5>Download</h5>
<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
<hr>
<a href="https://unpkg.com/papaparse@latest/papaparse.min.js">Lil' Papa</a>
<a href="https://unpkg.com/papaparse@latest/papaparse.js">Fat Papa</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Community</h5>
<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>