CODEWITHSUNDEEP
javascriptphpcsvhtml-tableexport-to-csv
Amen Ra
Amen Ra

Reputation: 2851

How can I create functionality where html can be exported to a CSV file?

I have the following html file: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
    <head>
    </head>
    <body>
         <p align="center"><strong>Claims Search Results</strong></p>
         <table id="ClaimsListPrint" class="printClaims">
         <thead>
        <tr style="background-color: rgb(241, 241, 241);">
            <th style="background-color: rgb(215, 227, 235);">
                Member
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Date of Service
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Provider
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Claim Type
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Status
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Billed Amount
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Paid by Plan
            </th>
            <th style="background-color: rgb(215, 227, 235);">
                Member Responsiblity
            </th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: rgb(255, 255, 240);" class="claim">
            <td class="claim-member">
                John Sample
            </td>
            <td class="claim-dateOfService">
                02/27/2011
            </td>
            <td class="claim-provider">
                TestProv1
            </td>
            <td class="claim-claimType">
                Medical
            </td>
            <td class="claim-status">
                Processed
            </td>
            <td class="claim-billedAmount">
                $145
            </td>
            <td class="claim-paidByPlan">
                $125
            </td>
            <td class="claim-memberResponsibility">
                $25
            </td>
        </tr>
        <tr style="background-color: rgb(241, 241, 241);" class="claim">
            <td class="claim-member">
                John Sample
            </td>
            <td class="claim-dateOfService">
                02/27/2011
            </td>
            <td class="claim-provider">
                TestProv1
            </td>
            <td class="claim-claimType">
                Medical
            </td>
            <td class="claim-status">
                In-Process
            </td>
            <td class="claim-billedAmount">
                -
            </td>
            <td class="claim-paidByPlan">
                -
            </td>
            <td class="claim-memberResponsibility">
                -
            </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

I would like the end user to be able to clink on a link in the file like the following: 

<a id="link3" class="links" href="home.html">Export to Microsoft Excel</a>

When they click on it I would like the table to be exported as a csv file. How can I accomplish this? Can I do this with Javascript or PHP or whatever?

Upvotes: 1

Views: 1145

Answers (5)

James
James

Reputation: 3239

If you want to have this CSV file downloadable then you could use PHP to modify the document headers to tell the browser to force a file download. I use the following function to force file downloads for existing files, but you could modify it to output a CSV file that you generate on the fly by making a few modifications. Alternatively you could save a CSV file and use this to download it.

BTW, this isn't my original code. I found it somewhere else on StackOverflow and it has worked great for me.

function download($filePath) {
    if(headers_sent()) die('Headers alread sent. Download cannot initialize.');

    // Required for some browsers
    if (ini_get('zlib.output_compression')) ini_set('zlib.output_compression', 'Off');

    // File Exists?
    if( file_exists($filePath) ){
        // Parse Info / Get Extension
        $fsize = filesize($filePath);
        $path_parts = pathinfo($filePath);
        $ext = strtolower($path_parts["extension"]);

        // Determine Content Type
        switch ($ext) {
            case "pdf": $ctype="application/pdf"; break;
            case "exe": $ctype="application/octet-stream"; break;
            case "zip": $ctype="application/zip"; break;
            case "doc": $ctype="application/msword"; break;
            case "xls": $ctype="application/vnd.ms-excel"; break;
            case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
            case "gif": $ctype="image/gif"; break;
            case "png": $ctype="image/png"; break;
            case "jpeg":
            case "jpg": $ctype="image/jpg"; break;
            default: $ctype="application/force-download";
        }

        header("Pragma: public"); // required
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private",false); // required for certain browsers
        header("Content-Type: $ctype");
        header("Content-Disposition: attachment; filename=\"".basename($filePath)."\";" );
        header("Content-Transfer-Encoding: binary");
        header("Content-Length: ".$fsize);
        ob_clean();
        flush();
        readfile( $filePath );

    } else {
        die('File Not Found'); 
    }
}

Upvotes: 1

pixelbobby
pixelbobby

Reputation: 4440

Although, @p.campbell has a good solution, and it gives you formatted CSV, it doesn't give you a CSV download. If you want the end-user to download as a CSV you would use a server technology such as PHP and return CSV as the response type.

I also agree with @mrkmg. If you have the data, write some PHP to return the data in CSV format.

http://mysite.com/data/csv pass in the formatted data and in your PHP change the response type to CSV. User will get a nice save as... dialog box. I believe the code would look something like this:

<?php
// We'll be outputting a CSV
header('Content-type: application/csv');

// It will be called downloaded.csv
header('Content-Disposition: attachment; filename="downloaded.csv"');

// Write CSV...
?>

Upvotes: 0

Spudley
Spudley

Reputation: 168833

In PHP:

  1. Load the HTML file into a DOM object structure, using PHP's DOMDocument classes.

  2. Parse through the DomDocument, find the elements you want, and extract the relevant values to an array.

  3. Save the array as a CSV file using PHP's fputsvc() function.

Upvotes: 0

p.campbell
p.campbell

Reputation: 100637

Consider using the jQuery plugin: HTML Table to CSV

It's a one-liner:

$('#mytable').table2CSV();

You can see this in action at this HTML Table To CSV demo.

Upvotes: 5

mrkmg
mrkmg

Reputation: 241

Whatever language you are using to generate the page is what I would export it with. It makes no sense to parse an HTML page to generate a CSV if you already have the data somewhere else. How is the page generated?

Upvotes: 1

Related Questions