/ / Javascript & Jquery / Comments (5)

Export dữ liệu ra Excel, CSV, JSON, PDF, PNG sử dụng jQuery

Export dữ liệu trong website là một chức năng rất quan trọng mà hầu hết website nào cũng cần có.Có rất nhiều cách export dữ liệu ra các định dạng khác nhau và mình cũng có giới thiệu cho các bạn một số cách như export dữ liệu ra file excel,export dữ liệu ra file ảnh.Trong bài hôm nay mình sẽ giới thiệu cho các bạn cách tổng hợp export dữ liệu dạng bảng (table) ra nhiều định dạng khác nhau như Excel, CSV, JSON, PDF, PNG sử dụng các thư viện jQuery thật tuyệt vời phải không nào.

Export dữ liệu ra Excel, CSV, JSON, PDF, PNG sử dụng jQuery

Export dữ liệu ra Excel, CSV, JSON, PDF, PNG sử dụng jQuery

Export dữ liệu ra nhiều định dạng khác nhau

– Chúng ta hoàn toàn có thể xuất dữ liệu ra nhiều định dạng khác nhau như:

  1. JSON
  2. XML
  3. PNG
  4. CSV
  5. TXT
  6. SQL
  7. MS-Word
  8. Ms-Excel
  9. Ms-Powerpoint
  10. PDF

Cài đặt và sử dụng

– Bước 1: Trước tiên chúng ta cần sử dụng thư viện jQuery và 1 số plugin hỗ trợ sau:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="tableExport.js"></script>
<script type="text/javascript" src="jquery.base64.js"></script>

– Bước 2: Nếu bạn muốn export dữ liệu dạng bảng (table) ra file hình ảnh định dang PNG thì cần sử dụng thêm thư viện html2canvas.js:

<script type="text/javascript" src="html2canvas.js"></script>

– Bước 3: Nếu bạn muốn export dữ liệu dạng bảng (table) ra file định dang PDF thì cần sử dụng thêm thư viện jspdf:

<script type="text/javascript" src="jspdf/libs/sprintf.js"></script>
<script type="text/javascript" src="jspdf/jspdf.js"></script>
<script type="text/javascript" src="jspdf/libs/base64.js"></script>

– Bước 4: Xây dựng dữ liệu cần export ra dưới dạng bảng

<table>
	<thead>			
		<tr>
			<th>Country</th>
			<th>Population</th>
			<th>Date</th>
			<th>%ge</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Chinna</td>
			<td>1,363,480,000</td>
			<td>March 24, 2014</td>
			<td>19.1</td>
		</tr>
		<tr>
			<td>India</td>
			<td>1,241,900,000</td>
			<td>March 24, 2014</td>
			<td>17.4</td>
		</tr>
		<tr>
			<td>United States</td>
			<td>317,746,000</td>
			<td>March 24, 2014</td>
			<td>4.44</td>
		</tr>
		<tr>
			<td>Indonesia</td>
			<td>249,866,000</td>
			<td>July 1, 2013</td>
			<td>3.49</td>
		</tr>
		<tr>
			<td>Brazil</td>
			<td>201,032,714</td>
			<td>July 1, 2013</td>
			<td>2.81</td>
		</tr>
	</tbody>
</table>

– Bước 5: Cách sử dụng,chúng ta sẽ có mã html export dữ liệu dạng bảng ở trên ra như sau:

<a href="#" onClick ="$('#tableID').tableExport({type:'json',escape:'false'});">JSON</a>
<a href="#" onClick ="$('#tableID').tableExport({type:'excel',escape:'false'});">XLS</a>
<a href="#" onClick ="$('#tableID').tableExport({type:'csv',escape:'false'});">CSV</a>
<a href="#" onClick ="$('#tableID').tableExport({type:'pdf',escape:'false'});">PDF</a>

– Ngoài ra còn các định dạng hỗ trợ khác như:

{type:'json',escape:'false'}
{type:'json',escape:'false',ignoreColumn:'[2,3]'}
{type:'json',escape:'true'}
{type:'xml',escape:'false'}
{type:'sql'}
{type:'csv',escape:'false'}
{type:'txt',escape:'false'}
{type:'excel',escape:'false'}
{type:'doc',escape:'false'}
{type:'powerpoint',escape:'false'}
{type:'png',escape:'false'}
{type:'pdf',pdfFontSize:'7',escape:'false'}

Kết luận : Với những cấu hình đơn giản như trên chúng ta hoàn toàn có thể dễ dàng export dữ liệu ở dạng bảng ra nhiều định dạng khác nhau phải không nào.Bài viết được tham khảo từ http://w3lessons.info/2015/07/13/export-html-table-to-excel-csv-json-pdf-png-using-jquery/



27/02/2016
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

5 Comments

  1. dũng says:
     /  Reply

    thanks,bài viết đơn giản mà quá bổ ích nó tổng hợp được hết mọi thứ 😀

  2. Tuấn Anh Zippy says:
     /  Reply

    Xuất thêm được HTML nữa thì hay.

  3. mr blue says:
     /  Reply

    không xuất sang excel khi là font tiếng việt được là sao? còn khi dữ liệu là tiếng anh thì thực hiện được?

  4. học code php says:
     /  Reply

    Bạn ơi muốn xuất ra được tiếng việt UTF-8 thì làm thế nào? Có thể chỉ giúp được ko?

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL