jQuery에서 csv로 내보내기

jQuery에서 csv로 내보내기

나는 동적으로 다음과 같은 div를 생성하고 있습니다.

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

그리고 페이지에는 더 많은 요소들이 있습니다.다음과 같은 CSV 파일을 가져오려면 어떻게 해야 합니까?

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

jQuery를 사용하시겠습니까?

다음과 같은 파일 저장 대화 상자도 필요합니다.

감사해요.

이 작업은 클라이언트 측의 Data URI를 허용하는 브라우저에서만 수행할 수 있습니다.

data:application/csv;charset=utf-8,content_encoded_as_url

이 예에서 데이터 URI는 다음과 같아야 합니다.

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

이 URI는 다음과 같이 호출할 수 있습니다.

• 용사를 window.open
• 는또설정 합니다.window.location
• 또는 그 옆에href을 내린 의.
• 를 download속성 그것은 크롬에서 작동할 것이고, 여전히 IE에서 테스트해야 합니다.

테스트하려면 위의 URI를 복사하여 브라우저 주소 표시줄에 붙여넣기만 하면 됩니다.또는 HTML 페이지에서 아래 앵커를 테스트합니다.

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

표에서 값을 가져와 내용을 작성하려면 표 2를 사용합니다.CSV 및 수행:

var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

전부는 아니더라도 대부분의 IE 버전은 데이터 링크로의 탐색을 지원하지 않기 때문에 해킹을 구현해야 합니다.iframe 사용iFrame 와 결합하면 현재 사용되는 IE 버전에서 유사한 동작을 얻을 수 있습니다.

이것이 제가 구현한 것입니다(https://gist.github.com/3782074) 에 기반:

용도: HTML:

<table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

JS:

$("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

코드:

jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.push('"' + tmpStr + '"');
                  }
             });
          csvData.push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

참고:

• 제목에 "th" 태그를 사용합니다.해당 항목이 없으면 추가되지 않습니다.
• 이 코드는 -#### 형식의 숫자를 감지합니다.다른 형식(예: 쉼표 사용)을 사용하려면 코드를 수정해야 합니다.

업데이트:

이전 구현은 잘 작동했지만 csv 파일 이름이 설정되지 않았습니다.파일 이름을 사용하도록 코드가 수정되었지만 < a > 요소가 필요합니다.< a > 요소를 동적으로 생성하고 "클릭" 이벤트를 실행할 수 없는 것 같습니다(보안상의 이유일 수도 있음).

데모

http://jsfiddle.net/nLj74t0f/

(불행히도 jsfiddle은 파일을 생성하지 못하고 대신 'Please use POST request, please use POST request.'라는 오류를 발생시킵니다. 해당 오류로 인해 응용 프로그램에서 이 코드를 테스트할 수 없습니다.)

저는 최근에 이것을 위한 무료 소프트웨어 라이브러리를 게시했습니다: "html5csv.js" -- GitHub

이것은 자바스크립트에서 csv 파일을 가져오거나 내보내고, 데이터를 조작, 표시, 편집하고, 피팅과 같은 다양한 수학적 절차를 수행해야 할 수 있는 작은 시뮬레이터 앱을 효율적으로 만들 수 있도록 돕기 위한 것입니다.

"html5csv.js"를 로드한 후 테이블을 스캔하고 CSV를 생성하는 문제는 단일 라이너입니다.

CSV.begin('#PrintDiv').download('MyData.csv').go();

다음은 이 코드를 사용한 예제의 JSFidle 데모입니다.

내부적으로 Firefox/Chrome의 경우 @italo, @lepe 및 @adeneo(다른 질문에 대해)에서 제안한 솔루션과 유사한 데이터 URL 지향 솔루션입니다.IE용

그CSV.begin()배열로 합니다.call은 내부 배열입니다.그런 다음 해당 가져오기가 발생합니다.에 그면러그..download()내부적으로 데이터 URL 링크를 생성하고 링크 클릭기로 클릭합니다.그러면 파일이 최종 사용자에게 푸시됩니다.

caniuse에 따르면 IE10은 지원하지 않습니다.<a download=...>그래서 IE를 위해 도서관에서 전화를 합니다.navigator.msSaveBlob()내부적으로, @마누 샤르마가 제안한 것처럼.

다음은 클라이언트에서 다운로드만 트리거하는 문제에 대한 두 가지 해결 방법입니다.최신 브라우저에서는 "블럽"을 살펴봐야 합니다.

---

테이블 끌어서 놓기

테이블을 Excel로 간단히 끌 수 있다는 것을 알고 계십니까?

잘라내기 및 붙여넣기 또는 끌 테이블을 선택하는 방법은 다음과 같습니다.

Javascript가 있는 전체 테이블 선택(클립보드에 복사)

---

div에서 팝업 페이지 생성

저장 대화 상자를 생성하지는 않지만 결과 팝업이 확장자 .csv로 저장되면 Excel에서 올바르게 처리됩니다.

문자열은 다음과 같습니다.
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
예: 라인에 대한 라인 피드로 탭 구분.

http://plugins.jquery.com/project/table2csv 과 같이 문자열을 생성하는 플러그인이 있습니다.

var w = window.open('','csvWindow'); // popup, may be blocked though
// the following line does not actually do anything interesting with the 
// parameter given in current browsers, but really should have. 
// Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); // the csv string from for example a jquery plugin
w.document.close();

---

고지 사항: 이들은 해결 방법이며, 대부분의 브라우저에 대해 현재 답이 있는 질문에 완전히 답하지는 않습니다. 클라이언트에서만 가능하지 않습니다.

jQuery만 사용하면 서버 호출을 피할 수 없습니다.

그러나 이 결과를 얻기 위해 다른 서버를 호출하지 않고 파일을 저장할 수 있는 Downloadify를 사용하고 있습니다.이렇게 하면 서버 부하가 감소하고 사용자 환경이 좋아집니다.

적절한 CSV를 얻으려면 불필요한 태그를 모두 제거하고 데이터 사이에 ','를 넣기만 하면 됩니다.

여기서는 서버 호출을 피할 수 없습니다. JavaScript는 보안상의 이유로 사용자의 파일 시스템에 파일을 저장할 수 없습니다.당신은 당신의 데이터를 서버에 제출하고 그것이 전송하도록 해야 할 것입니다..csv링크 또는 직접 첨부 파일로 사용할 수 있습니다.

HTML5에는 이를 수행할 수 있는 몇 가지 기능이 있지만(저장은 실제로는 지정되지 않았지만, 사용 사례일 뿐, 원하는 경우 파일을 읽을 수 있습니다), 현재는 크로스 브라우저 솔루션이 없습니다.

다음 데모가 도움이 되길 바랍니다.

$(function() {
  $("button").on('click', function() {
    var data = "";
    var tableData = [];
    var rows = $("table tr");
    rows.each(function(index, row) {
      var rowData = [];
      $(row).find("th, td").each(function(index, column) {
        rowData.push(column.innerText);
      });
      tableData.push(rowData.join(","));
    });
    data += tableData.join("\n");
    $(document.body).append('<a id="download-link" download="data.csv" href=' + URL.createObjectURL(new Blob([data], {
      type: "text/csv"
    })) + '/>');


    $('#download-link')[0].click();
    $('#download-link').remove();
  });
});

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #aaa;
  padding: 0.5rem;
  text-align: left;
}

td {
  font-size: 0.875rem;
}

.btn-group {
  padding: 1rem 0;
}

button {
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 0.5rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='PrintDiv'>
  <table id="mainTable">
    <tr>
      <td>Col1</td>
      <td>Col2</td>
      <td>Col3</td>
    </tr>
    <tr>
      <td>Val1</td>
      <td>Val2</td>
      <td>Val3</td>
    </tr>
    <tr>
      <td>Val11</td>
      <td>Val22</td>
      <td>Val33</td>
    </tr>
    <tr>
      <td>Val111</td>
      <td>Val222</td>
      <td>Val333</td>
    </tr>
  </table>
</div>

<div class="btn-group">
  <button>csv</button>
</div>

다음 코드를 사용해 보십시오.HTML 테이블의 값으로 CSV를 생성하는 것은 매우 간단합니다.브라우저 문제가 발생하지 않습니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        
        <script src="http://www.csvscript.com/dev/html5csv.js"></script>
<script>
$(document).ready(function() {

 $('table').each(function() {
    var $table = $(this);

    var $button = $("<button type='button'>");
    $button.text("Export to CSV");
    $button.insertAfter($table);

    $button.click(function() {     
         CSV.begin('table').download('Export.csv').go();
    });
  });  
})

</script>
    </head>
<body>
<div id='PrintDiv'>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>
</div>
</body>
</html>

언급URL : https://stackoverflow.com/questions/4639372/export-to-csv-in-jquery