복붙노트

[JQUERY] jQuery를에 CSV로 내보내기

JQUERY

jQuery를에 CSV로 내보내기

해결법

  1. 1.당신은 데이터 URI를 받아 해당 브라우저에서 만 클라이언트 측에서이 작업을 수행 할 수 있습니다

    당신은 데이터 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를하여 호출 할 수 있습니다 :

    테스트하려면 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>

    내용을 작성하려면 테이블에서 값을 받고, 당신은 table2CSV를 사용하여 수행 할 수 있습니다

    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();
});

    모든 경우 해킹이 종종 iframe을 함께 구현해야하므로 대부분은, IE의 버전은 데이터 링크 탐색을 지원하지 않습니다. ( '다른 이름으로 저장'..) document.execCommand 결합은 iframe을 사용하면 IE의 대부분 현재 사용중인 버전에 비슷한 동작을 얻을 수 있습니다.

  2. 2.이것은 (: https://gist.github.com/3782074에 기반을 둔) 내 구현 한 것입니다 :

    이것은 (: 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);
}

    메모:

    최신 정보:

    내 이전의 구현은 벌금을 근무하지만 CSV 파일 이름을 설정하지 않았다. 코드는 파일 이름을 사용하도록 수정하지만 그것은 요소를 필요로 하였다. 당신이 동적으로 요소를 생성하고 "클릭"이벤트 해고 할 수없는 것 (아마도 보안상의 이유를?).

    데모

    http://jsfiddle.net/nLj74t0f/

    (불행히도 파일을 생성 jsfiddle 실패하고 대신 오류가 발생합니다 : 응용 프로그램에서이 코드를 테스트에서 해당 오류 정지 당신을해서는 안된다 'POST 요청을 사용하십시오').

  3. 3.나는 최근에 이것에 대한 무료 소프트웨어 라이브러리를 게시 : "html5csv.js"- GitHub의

    나는 최근에 이것에 대한 무료 소프트웨어 라이브러리를 게시 : "html5csv.js"- GitHub의

    그것은 도움 합리화에 작은 시뮬레이터 응용 프로그램의 작성을 목적으로 자바 스크립트에서 가져 오기 또는 내보내기 CSV 파일 조작, 디스플레이, 편집해야하는 데이터 등과 같은 다양한 수학적 피팅 절차를 수행

    로딩 후 "html5csv.js"는 CSV를 테이블을 스캔하고 생성의 문제는 한 줄은 다음과 같습니다

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

    다음은이 코드를 사용하여 귀하의 예제의 JSFiddle 데모입니다.

    내부적으로, 파이어 폭스 / 크롬이는 (또 다른 질문에) @italo, @lepe 및 @adeneo에 의해 제안 된 것과 유사한 데이터 URL 중심의 솔루션이다. IE의 경우

    시스템 가입 CSV.begin () 호출 설정은 내부 배열로 데이터를 판독한다. 그 후 발생 가져옵니다. 그런 다음 .download ()는 내부적으로 데이터 URL 링크를 생성하고 링크 리모콘으로를 클릭합니다. 이것은 최종 사용자에게 파일을 푸시합니다.

    IE10은 를 지원하지 않습니다 caniuse에 따르면. @Manu 샤르마에 의해 제안 그래서 IE 내 라이브러리는 내부적으로 navigator.msSaveBlob ()를 호출

  4. 4.여기에만 클라이언트에서 다운로드를 트리거의 문제에 대한 두 가지 해결 방법이 있습니다. 나중에 브라우저에서 당신은 "덩어리"를 보라

    여기에만 클라이언트에서 다운로드를 트리거의 문제에 대한 두 가지 해결 방법이 있습니다. 나중에 브라우저에서 당신은 "덩어리"를 보라

    1. 드래그 앤 테이블을 삭제

    당신은 당신이 단순히 엑셀로 테이블을 드래그 할 수 있습니다 알고 계십니까?

    다음 중 하나를 절단에 테이블을 선택하고 붙여 넣기하거나 드래그하는 방법입니다

    자바 스크립트로 전체 테이블을 선택 (클립 보드에 복사 할)

    당신의 사업부에서 팝업 페이지를 작성합니다

    이 대화 선방을 생산하지는 않지만 그 결과 나타나는 팝업이 확장 된 .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();

    면책 조항 : 이러한 해결 방법이며, 완벽하게 현재 대부분의 브라우저에 대한 답이있는 질문에 대답하지 않습니다 클라이언트 수는 없습니다 만

  5. 5.단지 jQuery를 사용하면 서버 호출을 피할 수 없습니다.

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

    그러나, 다른 서버를 호출하지 않고도 내가 파일 저장 날 수 있습니다 Downloadify를 사용하고,이 결과를 달성하기 위해. 이렇게하면 서버의 부하를 줄이고 좋은 사용자 경험을합니다.

    적절한 CSV를 얻으려면 당신은 모든 불필요한 태그를 꺼내 데이터 사이 ','이 넣어해야합니다.

  6. 6.현재 서버 호출을 피할 수없는, 자바 스크립트는 단순히 (보안상의 이유로) 사용자의 파일 시스템에 파일을 저장할 수 없습니다. 당신은 서버에 데이터를 제출하고 링크 나 직접 첨부 파일로 .CSV을 보내해야합니다.

    현재 서버 호출을 피할 수없는, 자바 스크립트는 단순히 (보안상의 이유로) 사용자의 파일 시스템에 파일을 저장할 수 없습니다. 당신은 서버에 데이터를 제출하고 링크 나 직접 첨부 파일로 .CSV을 보내해야합니다.

    HTML5는 (정말 지정되지 절약이 있지만 - 다만 유스 케이스를 원하는 경우, 파일을 읽을 수 있습니다)이 작업을 수행하는 몇 가지 기능을 가지고 있지만 장소에는 크로스 브라우저 솔루션은 이제 없다.

  7. 7.그냥 HTML 테이블의 값으로 다음과 같은 코딩 ... 아주 간단한 생성하는 CSV를보십시오. 어떤 브라우저 문제는 올 것이다

    그냥 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>

  8. 8.다음 데모는 당신을 도울 수 있기를 바랍니다.

    다음 데모는 당신을 도울 수 있기를 바랍니다.

    () {(기능 $ $ ( "버튼"). (함수를 '클릭'에 () { VAR 데이터 = ""; VAR tableData은 [] =; VAR 행 = $ ( "테이블 TR"); rows.each (기능 (인덱스 행) { VAR rowData 하행 [] =; $ (행) .find ( "번째 TD"). 각 (기능 (인덱스 컬럼) { rowData.push (column.innerText); }); tableData.push (rowData.join ( ",")); }); 데이터 + = tableData.join ( "\ n"); $ (는 document.body)으로 .Append ( ''); $ ( '# 다운로드 링크') [0] .click (); $ ( '# 다운로드 링크') (제거).; }); }); 테이블 { 국경 - 붕괴 : 붕괴; } TD, 일 { 국경 : 1 픽셀의 고체 #aaa; 패딩 : 0.5rem; 텍스트 정렬은 : 왼쪽; } TD { 폰트 크기 : 0.875rem; } .btn 그룹 { 패딩 : 1rem 0; } 버튼 { 배경 색상 : #fff; 국경 : 1 픽셀의 고체 # 000; 여백 - 가기 : 0.5rem; 경계 반경 : 3px의; 패딩 : 0.5rem의 1rem; 폰트 크기 : 1rem; } 버튼 : 가져가 { 커서 : 포인터; 배경 색상 : # 000; 색상 : #fff; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    9. from https://stackoverflow.com/questions/4639372/export-to-csv-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 파이어 폭스 확장에 jQuery를 사용하는 방법  (0) 2020.10.25
[JQUERY] 키 값을 기준으로 배열의 자바 스크립트의 발견 및 제거 개체  (0) 2020.10.25
[JQUERY] jQuery를 함께 요소를 가리키면 경우 감지  (0) 2020.10.25
[JQUERY] jquery.animate와 CSS 회전 크로스 브라우저 ()  (0) 2020.10.25
[JQUERY] jQuery를 UI 자동 완성 검색 구성을 위젯  (0) 2020.10.25
,

티스토리툴바