Tôi đang làm việc trên ứng dụng bảng điều khiển và tôi muốn triển khai tính năng "tải xuống bảng dưới dạng .xls".Plugin Table2excel không hoạt động
Mở liên kết này bạn có thể thấy bảng trông như dashboard
Tôi đã tìm thấy một library mà còn bao gồm các hướng dẫn, giải thích các thiết lập. Như bạn có thể thấy trong đoạn code dưới đây tôi đã làm nhiều hơn hoặc ít hơn tất cả mọi thứ như nó đã được giải thích. Tuy nhiên nó không hoạt động và vì lý do nào đó, bảng sẽ không được xuất.
Như bạn thấy đấy, tôi đã bao gồm jquery.table2excel.js trong các nguồn lực cùng với tất cả các nguồn lực khác được sử dụng cho trang này. Tôi cũng đã kiểm tra xem tệp .js có sẵn sau khi trang được tải hay không và nó cũng có vẻ tốt.
Tôi cũng đã cố gắng này
$(function() {
document.getElementById('btnExport').addEventListener("click", function() {
document.getElementById('myTable').table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
nhưng nó cũng không giống tốt và khi tôi thực hiện các chức năng tôi nhận được thông báo này trong debugg console
TypeError: document.getElementById(...).table2excel is not a function
Đây là cách của tôi index.jsp trông giống như tại thời điểm
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KPI Admin</title>
<link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/css/addition.css" />" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="<c:url value="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />"></script>
<script src="<c:url value="http://code.jquery.com/ui/1.9.2/jquery-ui.js" />"></script>
<script src="<c:url value="/resources/js/bootstrap.js" />"></script>
<script src="<c:url value="/resources/js/addition.js" />"></script>
<script src="<c:url value="/resources/js/jquery.table2excel.js" />"></script>
<script>
$(function() {
document.getElementById('btnExport').addEventListener("click", function() {
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- /.nav -->
</nav>
<div class="container">
<div class="starter-template">
<ul class="nav nav-tabs">
<!-- /.tabs -->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">
<form:form action="/KPIAdmin/kpis" method="get">
<div class="row form-inline">
<div class="form-group">
<label for="date">Date</label>
<input id="startDatePicker" type="text" class="form-control" name="date" value="${date}" >
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<br>
<div class="table-responsive">
<table id="myTable" class="table table-bordered table2excel">
<thead>
<tr>
<td>Name</td>
<td>Last import</td>
<td>Last value</td>
<td colspan="4">Values</td>
<td colspan="3">Targets</td>
<td colspan="3">Score</td>
<td>Action</td>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-center" style="font-weight: 700;">DTD</td>
<td class="text-center" style="font-weight: 700;">WTD</td>
<td class="text-center" style="font-weight: 700;">MTD</td>
<td class="text-center" style="font-weight: 700;">YTD</td>
<td class="text-center" style="font-weight: 700;">0</td>
<td class="text-center" style="font-weight: 700;">100</td>
<td class="text-center" style="font-weight: 700;">150</td>
<td class="text-center" style="font-weight: 700;">WTD</td>
<td class="text-center" style="font-weight: 700;">MTD</td>
<td class="text-center" style="font-weight: 700;">YTD</td>
<td></td>
</tr>
<c:forEach var="row" items="${rows}" varStatus="loop">
<!-- /.loop that creates the table -->
</c:forEach>
<tr>
<!-- /. last row mean -->
</tr>
</table>
</div>
</form:form>
<button id="btnExport" class="btn btn-default">Export as .xls</button>
</div>
<div class="tab-pane fade" id="B"> <!-- Content inside tab B --> </div>
<div class="tab-pane fade" id="C"> <!-- Content inside tab C --> </div>
</div>
</div>
</div><!-- /.container -->
Tôi thực sự không chắc chắn điều gì có thể gây ra sự cố này hoặc tôi gặp lỗi trong cú pháp jQuery. Nó cũng có thể là lib không phải là inportet một cách chính xác trong trang .jsp nhưng đây là cách mà đã làm việc cho tôi trong quá khứ. Tôi đoán rằng tôi đang sử dụng đúng phiên bản jQuery kể từ jQuery datePicker hoạt động tốt.
Nếu bạn có thể xem điều gì có thể giải quyết vấn đề này, hãy giúp tôi khắc phục sự cố này. Nếu bạn có bất kỳ ý tưởng tốt hơn làm thế nào để xuất khẩu một bảng như một tập tin excel xin vui lòng đề nghị.
Thx trước.
Sửa 1:
Tôi đã thay đổi chức năng và có vẻ như đoạn code tôi đã đăng tải dưới đây. Nếu tôi thực thi console.log("exporting..."); trước hoặc sau $(".table2excel").table2excel({ ... }); "exporing ..." sẽ được in ra trong bảng điều khiển. Rõ ràng là không bao gồm jQuery là nguyên nhân tiềm ẩn của sự cố.
<script>
$(function() {
$('#btnExport').click(function() {
console.log("exporting...");
$(".table2excel").table2excel({
exclude: ".noExl",
name: "Excel Document Name",
filename: "myFileName"
});
});
});
</script>
Chỉnh sửa 2:
Kể từ khi tôi đã không thể khắc phục điều này, tôi đã cố gắng thử những điều mới mẻ. Tôi đã tìm thấy this giải pháp và nó hoạt động nhưng vẫn không như tôi thực sự muốn, vì vậy tôi hy vọng rằng bạn có thể giúp tôi cải thiện nó.
bảng của tôi trông như thế này 
và đây là những gì tôi nhận được là kết quả 
Trước hết nó thực sự trông lạ mà không excel lưới, làm bạn có một ý tưởng tại sao các tập tin là xuất khẩu mà không có nó và làm thế nào tôi có thể thêm nó?
Thứ hai, tôi muốn xóa cột sau YTD khi các thông tin bổ sung được trình bày. Là nó bằng cách nào đó có thể điều chỉnh tab_text.replace(...) dưới đây để đạt được điều này
trong html nó trông như thế này
</td><td width='20px'>
<a class='infobox' href=''>
<img src='img/info.jpg' alt='info' width='18' height='18'>
<span> Service Engineer: ... <br>
Datasource: ...
</span>
</a>
</tr>
hàm JavaScript trông giống như
function exportExcelReport(tblId) {
var tab_text = "<table border='2px'><tr>";
var table = document.getElementById(tblId);
var style;
for (var j = 0; j < table.rows.length; j++) {
style = table.rows[j].className.split(" ");
if (style.length < 2)
tab_text = tab_text + table.rows[j].innerHTML + "</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<a[^>]*>|<\/a>/g, "");
tab_text = tab_text.replace(/<img[^>]*>/gi, "");
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
return window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
}
Thx này!
Hãy thử hiển thị mã với câu trả lời của bạn để làm cho mã dễ đọc hơn. –
http://download.csdn.net/download/polk6/8974195 – Ricky
$ (function() { $ ("body"). On ("click", "button", function() { exportExcel(); }); chức năng exportExcel() { $ ("bảng. ") table2excel ({ loại trừ:." .noExl", tên: "Excel Document Name", filename: "MyFileName", fileext: " .xls", exclude_img: đúng, exclude_links: đúng, exclude_inputs: true });} }) – Ricky