jQuery 및 HTML을 사용하여 CSV로 내보내기
외부 플러그인이나 API를 사용하지 않고 CSV로 내 보내야하는 표 형식의 데이터가 있습니다. 나는 window.openMIME 유형을 전달 하는 방법을 사용 했지만 다음과 같은 문제에 직면했습니다.
jquery를 사용하여 시스템에 Microsoft Excel 또는 Open Office가 설치되어 있는지 확인하는 방법
코드는 시스템에 설치된 것, 즉 오픈 오피스 또는 MS 엑셀과는 독립적이어야합니다. CSV는 두 편집자 모두에게 표시 될 것으로 예상되는 형식이라고 생각합니다.
암호
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#btnExport").click(function(e) {
var msg = GetMimeTypes();
//OpenOffice
window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html());
//MS-Excel
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
//CSV
window.open('data:application/csv,charset=utf-8,' + $('#dvData').html());
e.preventDefault();
});
});
function GetMimeTypes () {
var message = "";
// Internet Explorer supports the mimeTypes collection, but it is always empty
if (navigator.mimeTypes && navigator.mimeTypes.length > 0) {
var mimes = navigator.mimeTypes;
for (var i=0; i < mimes.length; i++) {
message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />";
}
}
else {
message = "Your browser does not support this ";
//sorry!
}
return ( message);
}
</script>
</head>
<body>
<div id="dvData">
<table>
<tr>
<th>Column One </th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td>row3 Col3</td>
</tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</body>
오류 :
CSV : 브라우저에서 인식되지 않음
ODS 및 Excel : 작동하지만 시스템에 Excel이 설치되어 있거나 OpenOffice가 설치되어있을 때 생성 할 항목을 찾을 수 없습니까?
IE 버전 8 : 완전히 작동하지 않고 새 창에서 열리고 아래 스크린 샷과 같습니다.
데모
설명은 아래를 참조하십시오.
$(document).ready(function() {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
// Grab text from table into CSV formatted string
csv = '"' + $rows.map(function(i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function(j, col) {
var $col = $(col),
text = $col.text();
return text.replace(/"/g, '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"';
// Deliberate 'false', see comment below
if (false && window.navigator.msSaveBlob) {
var blob = new Blob([decodeURIComponent(csv)], {
type: 'text/csv;charset=utf8'
});
// Crashes in IE 10, IE 11 and Microsoft Edge
// See MS Edge Issue #10396033
// Hence, the deliberate 'false'
// This is here just for completeness
// Remove the 'false' at your own risk
window.navigator.msSaveBlob(blob, filename);
} else if (window.Blob && window.URL) {
// HTML5 Blob
var blob = new Blob([csv], {
type: 'text/csv;charset=utf-8'
});
var csvUrl = URL.createObjectURL(blob);
$(this)
.attr({
'download': filename,
'href': csvUrl
});
} else {
// Data URI
var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
}
// This must be a hyperlink
$(".export").on('click', function(event) {
// CSV
var args = [$('#dvData>table'), 'export.csv'];
exportTableToCSV.apply(this, args);
// If CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});a.export,
a.export:visited {
display: inline-block;
text-decoration: none;
color: #000;
background-color: #ddd;
border: 1px solid #ccc;
padding: 8px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="export">Export Table data into Excel</a>
<div id="dvData">
<table>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td>row3 Col3</td>
</tr>
<tr>
<td>row4 'Col1'</td>
<td>row4 'Col2'</td>
<td>row4 'Col3'</td>
</tr>
<tr>
<td>row5 "Col1"</td>
<td>row5 "Col2"</td>
<td>row5 "Col3"</td>
</tr>
<tr>
<td>row6 "Col1"</td>
<td>row6 "Col2"</td>
<td>row6 "Col3"</td>
</tr>
</table>
</div>2017 년 기준
지금 HTML5을 사용 Blob하고 URL바람직한 방법 등으로 Data URI대체있다.
Internet Explorer에서
다른 답변은 제안합니다 window.navigator.msSaveBlob. 그러나 IE10 / Window 7 및 IE11 / Windows 10 이 충돌 하는 것으로 알려져 있습니다. Microsoft Edge를 사용하여 작동하는지 여부는 모호합니다 ( Microsoft Edge 문제 티켓 # 10396033 참조 ).
Microsoft의 자체 개발자 도구 / 콘솔에서 이것을 호출하기 만하면 브라우저가 중단됩니다.
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
첫 번째 답변이 있은 지 4 년 후에 새로운 IE 버전에는 IE10, IE11 및 Edge가 포함됩니다. 그들은 모두 마이크로 소프트가 발명 한 기능에 충돌합니다 (느린 박수).
navigator.msSaveBlob자신의 책임하에 지원을 추가하십시오 .
2013 년 기준
일반적으로 이것은 서버 측 솔루션을 사용하여 수행되지만 클라이언트 측 솔루션에 대한 나의 시도입니다. 단순히 HTML을 덤핑하는 Data URI것은 작동하지 않지만 유용한 단계입니다. 그래서:
- 테이블 내용을 유효한 CSV 형식 문자열로 변환합니다. (이것은 쉬운 부분입니다.)
- 브라우저를 강제로 다운로드하십시오. 이
window.open접근 방식은 Firefox에서 작동하지 않으므로<a href="{Data URI here}">. - Firefox 및 Google Chrome에서만 작동 하는
<a>태그의download속성을 사용하여 기본 파일 이름을 지정하십시오 . 그것은 단지 속성이기 때문에 우아하게 저하됩니다.
메모
- 단추처럼 보이도록 링크 스타일을 지정할 수 있습니다. 이 노력을 너에게 맡길 게
- IE에는 데이터 URI 제한이 있습니다. 참조 : 데이터 URI 체계 및 Internet Explorer 9 오류
[정보] "다운로드"속성 , 다음을 참조하십시오
적합성
브라우저 테스트에는 다음이 포함됩니다.
- Firefox 20 이상, Win / Mac ( 작동 )
- Google Chrome 26+, Win / Mac ( 작동 )
- Safari 6, Mac ( 작동 하지만 파일 이름은 무시 됨)
- IE 9+ ( 실패 )
콘텐츠 인코딩
CSV는 올바르게 내보내 지지만 Excel로 가져 오면 문자 ü가 ä. Excel에서 값을 잘못 해석합니다.
Introduce var csv = '\ufeff';를 입력하면 Excel 2013+에서 값을 올바르게 해석합니다.
Excel 2007과의 호환성이 필요한 경우 각 데이터 값에 UTF-8 접두사를 추가합니다. 또한보십시오:
- Excel에서 UTF-8 CSV 파일을 자동으로 인식하도록 강제 할 수 있습니까?
- Microsoft Excel은 .csv 파일에서 분음 부호를 엉망으로 만듭니다.
- 문자열 / Blob에 UTF-8 BOM 추가
위의 CSV 생성 코드가 th셀 을 건너 뛰는 것처럼 보이고 값에 쉼표를 허용하지 않는 것처럼 보이는지 확실 하지 않습니다. 여기에 유용 할 수있는 내 CSV 생성 코드가 있습니다.
그것은 가정 않습니다 당신이 가지고 $tableJQuery와 객체 인 변수 (예를. var $table = $('#yourtable');)
$rows = $table.find('tr');
var csvData = "";
for(var i=0;i<$rows.length;i++){
var $cells = $($rows[i]).children('th,td'); //header or content cells
for(var y=0;y<$cells.length;y++){
if(y>0){
csvData += ",";
}
var txt = ($($cells[y]).text()).toString().trim();
if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0){
txt = "\"" + txt.replace(/\"/g, "\"\"") + "\"";
}
csvData += txt;
}
csvData += '\n';
}
@Terry Young 답변에 대한 작은 업데이트 , 즉 IE 10+ 지원 추가
if (window.navigator.msSaveOrOpenBlob) {
// IE 10+
var blob = new Blob([decodeURIComponent(encodeURI(csvString))], {
type: 'text/csv;charset=' + document.characterSet
});
window.navigator.msSaveBlob(blob, filename);
} else {
// actual real browsers
//Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvData);
$(this).attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
CSV 형식의 데이터가 있고 웹 페이지에 표시하기 위해 HTML로 변환하면 어떻게됩니까? http://code.google.com/p/js-tables/ 플러그인을 사용할 수 있습니다 . 이 예제를 확인하십시오. http://code.google.com/p/js-tables/wiki/Table 이미 jQuery 라이브러리를 사용하고 있으므로 다른 javascript 툴킷 라이브러리를 추가 할 수 있다고 가정했습니다.
데이터가 CSV 형식 인 경우 일반 'application / octetstream'MIME 유형을 사용할 수 있어야합니다. 시도한 3 가지 MIME 유형은 모두 클라이언트 컴퓨터에 설치된 소프트웨어에 따라 다릅니다.
내가 이해 한 바에 따르면 테이블에 데이터가 있고 해당 데이터에서 CSV를 만들고 싶습니다. 그러나 CSV를 만드는 데 문제가 있습니다.
내 생각은 테이블의 내용을 반복하고 구문 분석하고 구문 분석 된 데이터에서 문자열을 생성하는 것입니다. 예를 들어 JSON을 CSV 형식으로 변환하고 변수 에 저장하는 방법을 확인할 수 있습니다 . 예제에서 jQuery를 사용하고 있으므로 외부 플러그인으로 간주되지 않습니다. 그런 다음 제안 된대로 사용 window.open하고 사용 하여 결과 문자열을 제공하면 application/octetstream됩니다.
<a id="export" role='button'>
Click Here To Download Below Report
</a>
<table id="testbed_results" style="table-layout:fixed">
<thead>
<tr width="100%" style="color:white" bgcolor="#3195A9" id="tblHeader">
<th>Name</th>
<th>Date</th>
<th>Speed</th>
<th>Column2</th>
<th>Interface</th>
<th>Interface2</th>
<th>Sub</th>
<th>COmpany result</th>
<th>company2</th>
<th>Gen</th>
</tr>
</thead>
<tbody>
<tr id="samplerow">
<td>hello</td>
<td>100</td>
<td>200</td>
<td>300</td>
<td>html2svc</td>
<td>ajax</td>
<td>200</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>hello</td>
<td>100</td>
<td>200</td>
<td>300</td>
<td>html2svc</td>
<td>ajax</td>
<td>200</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
Html2CSV('testbed_results', 'myfilename','export');
});
function Html2CSV(tableId, filename,alinkButtonId) {
var array = [];
var headers = [];
var arrayItem = [];
var csvData = new Array();
$('#' + tableId + ' th').each(function (index, item) {
headers[index] = '"' + $(item).html() + '"';
});
csvData.push(headers);
$('#' + tableId + ' tr').has('td').each(function () {
$('td', $(this)).each(function (index, item) {
arrayItem[index] = '"' + $(item).html() + '"';
});
array.push(arrayItem);
csvData.push(arrayItem);
});
var fileName = filename + '.csv';
var buffer = csvData.join("\n");
var blob = new Blob([buffer], {
"type": "text/csv;charset=utf8;"
});
var link = document.getElementById(alinkButton);
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
link.setAttribute("href", window.URL.createObjectURL(blob));
link.setAttribute("download", fileName);
}
else if (navigator.msSaveBlob) { // IE 10+
link.setAttribute("href", "#");
link.addEventListener("click", function (event) {
navigator.msSaveBlob(blob, fileName);
}, false);
}
else {
// it needs to implement server side export
link.setAttribute("href", "http://www.example.com/export");
}
}
</script>
참고 URL : https://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html
'Program Club' 카테고리의 다른 글
| 이전 git 커밋 제거 (0) | 2020.10.26 |
|---|---|
| PowerShell에서 % AppData %의 경로 가져 오기 (0) | 2020.10.26 |
| 'init (start : end :)'는 더 이상 사용되지 않습니다. Swift 3에서 제거됩니다. '.. <'연산자를 사용합니다. (0) | 2020.10.26 |
| 어설 션 vs. JUnit 어설 션 (0) | 2020.10.26 |
| 두 테이블의 SQL 비교 데이터 (0) | 2020.10.26 |