jQuery 및 HTML을 사용하여 CSV로 내보내기
외부 플러그인이나 API를 사용하지 않고 csv로 내보내야 하는 표 형태의 데이터가 있습니다.했습니다.window.openMIME 유형을 전달하는 메서드이지만 다음과 같은 문제가 발생했습니다.
jQuery를 사용하여 Microsoft Excel 또는 OpenOffice가 시스템에 설치되어 있는지 확인하는 방법
이 코드는 시스템에 설치되는 내용, 즉 사실과 무관해야 합니다.OpenOffice 또는 Microsoft Excel.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이 설치되어 있거나 오픈 오피스가 설치되어 있을 때 어떤 것을 생성해야 하는지 찾을 수 없습니다.
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 HTML5 합니다를 합니다.Blob그리고.URL의 바람직한 방법으로서Data URI
Internet Explorer(인터넷 익스플로러
다른 대답은 다음과 같습니다.window.navigator.msSaveBlob; 그러나 IE10/윈도7과 IE11/윈도10이 충돌하는 것으로 알려져 있습니다.Microsoft Edge를 사용하여 작동하는지 여부는 불확실합니다(Microsoft Edge 발행 티켓 #10396033 참조).
마이크로소프트 자체 개발자 도구/콘솔에서 이를 호출하는 것만으로도 브라우저가 다운됩니다.
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
제가 첫 번째 답변을 한 지 4년 후에 새로운 IE 버전에는 IE10, IE11, Edge가 포함됩니다.마이크로소프트가 개발한 기능에 모두 충돌합니다(슬로우 클랩).
더하다
navigator.msSaveBlob자부담으로 지원합니다.
2013년 기준
일반적으로 이 작업은 서버측 솔루션을 사용하여 수행되지만, 클라이언트측 솔루션에서는 이 작업을 수행하려고 합니다.히 HTML로 a는것을것으로 덤핑Data URI작동하지는 않지만 도움이 되는 단계입니다.그래서:
- 테이블 내용을 유효한 CSV 형식의 문자열로 변환합니다. (쉬운 부분입니다.)
- 브라우저에서 강제로 다운로드합니다.
window.open했습니다를 했습니다.<a href="{Data URI here}">. - 하여 을 합니다 을 사용하여 기본 파일 이름을 지정합니다.
<a>태그의download속성은 Firefox 와 Google Chrome 작동합니다 에서만그것은 단지 속성이기 때문에 우아하게 저하됩니다.
메모들
- 링크를 단추 모양으로 스타일링 할 수 있습니다.이 일은 당신에게 맡기겠습니다.
- IE에는 Data URI 제한 사항이 있습니다.참조: Data URI 스킴 및 Internet Explorer 9 오류
"download" 특성에 대해서는 다음을 참조하십시오.
호환성.
브라우저 테스트는 다음을 포함합니다.
- Firefox 20+, Win/Mac (작동)
- 구글 크롬 26+, Win/Mac (작품)
- Safari 6, Mac(작동하지만 파일 이름은 무시됨)
- IE 9+ (실패)
내용 인코딩
Excel로 CSV 가 Excel로 .ü다로 됩니다.äExcel이 함.. Excel이 값을 잘못 해석합니다.
ㅇ소개 var csv = '\ufeff';그런 다음 Excel 2013+는 값을 올바르게 해석합니다.
Excel 2007과 호환성이 필요한 경우 각 데이터 값에 UTF-8 접두사를 추가합니다.참고 항목:
- 엑셀이 UTF-8 CSV 파일을 자동으로 인식하도록 강제할 수 있습니까?
- Microsoft Excel이 .csv 파일에 Dialitics를 맹글링한다고요?
- 스트링/블롭에 UTF-8 BOM 추가
CSV 가 의 CSV 가 의 가 th 및 것으로 .cells및한에를지는다로다로는s및지ndoerods 여기 유용할 수 있는 CSV 생성 코드가 있습니다.
당신이 그 일을 하고 있다고 가정합니다.$table객체인 jQuery인수예 체: jQuery체인))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';
}
<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>
@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 library를 사용하고 있기 때문에 다른 javascript 툴킷 라이브러리를 추가할 수 있다고 가정했습니다.
데이터가 CSV 형식인 경우 일반적인 'application/octetstream' 마임 유형을 사용할 수 있습니다.시도한 3가지 마임 유형은 모두 클라이언트 컴퓨터에 설치된 소프트웨어에 따라 다릅니다.
제가 알기로는, 당신은 당신의 데이터를 테이블 위에 두고 있고, 그 데이터로부터 CSV를 만들고 싶어하는 것으로 알고 있습니다.그러나 CSV를 생성하는 데 문제가 있습니다.
저의 생각은 표의 내용을 반복해서 파싱하고 파싱된 데이터로부터 문자열을 생성하는 것입니다.예를 들어 JSON을 CSV 형식으로 변환하고 변수에 저장하는 방법을 확인할 수 있습니다.예제에서 jQuery를 사용하고 있으므로 외부 플러그인으로 간주되지 않습니다.그러면 결과 문자열은 다음을 사용하여 제공하면 됩니다.window.open사용.application/octetstream제시한 바와 같이
언급URL : https://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html
'programing' 카테고리의 다른 글
| Shift-JIS 및 CP932로 SQL 주입 공격을 만드는 방법은 무엇입니까? (0) | 2023.09.15 |
|---|---|
| 세로 스크롤 기반 jquery로 클래스 추가/제거? (0) | 2023.09.15 |
| strcase cmp 알고리즘에 결함이 있습니까? (0) | 2023.09.15 |
| MySQL 데이터베이스에 파일을 삽입하는 방법? (0) | 2023.09.15 |
| XPath contains()를 여기서 사용하는 방법? (0) | 2023.09.15 |