More than 5 years have passed since last update.

jQuery DataTables ExportのデータをＰＤＦ形式のファイルに出力する

Last updated at 2018-04-21Posted at 2018-04-21

##jQuery DataTablesのExport機能で表示している一覧表をPDFなどに出力できます。

###HTML5 export buttons
https://datatables.net/extensions/buttons/examples/html5/simple.html

1.ファイル構成

root
│  datatables.html
│  
├─DataTables
│  │  datatables.css
│  │  datatables.js
│  │  datatables.min.css
│  │  datatables.min.js
│  └─DataTables-1.10.16
│      ├─css
│      │      dataTables.bootstrap.min.css
│      │      dataTables.bootstrap4.min.css
│      │      jquery.dataTables.min.css
│      └─js
│              dataTables.bootstrap.min.js
│              dataTables.bootstrap4.min.js
│              dataTables.jqueryui.min.js
│              jquery.dataTables.min.js
└─js
        buttons.flash.min.js
        buttons.html5.min.js
        buttons.print.min.js
        dataTables.buttons.min.js
        jquery-3.3.1.min.js
        jszip.min.js
        pdfmake.min.js
        vfs_fonts_japanese.js

HTML5 export buttonsのサイトにあるファイルをそのままダウンロードするだけですが、このままでは、ＰＤＦを出力したときに日本語に対応できません。

こちらも下記サイトに対応方法が書いてありました。
https://saka24.blue/index.php/2017/06/30/datatables_pdf/

datatables.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrapモーダル</title>
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="DataTables/DataTables-1.10.16/css/dataTables.bootstrap.min.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="DataTables/DataTables-1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.flash.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
<script src="js/buttons.print.min.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts_japanese.js"></script>
<body>
<table id="example" class="display nowrap" style="width:100%">
		<thead>
			<tr><th>職員番号</th><th>氏名</th><th>性別</th><th>所属</th><th>住所</th><th>年齢</th><th>給料</th></tr>
		</thead>
		<tbody>
			<tr><td>100001</td><td>大阪仮　太郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 海老江</td><td>20</td><td>320,000</td></tr>
			<tr><td>100002</td><td>大阪仮　次郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 海老江</td><td>21</td><td>330,000</td></tr>
			<tr><td>100003</td><td>大阪仮　三郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 大開</td><td>22</td><td>340,000</td></tr>
			<tr><td>100004</td><td>大阪仮　四郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 大開</td><td>23</td><td>350,000</td></tr>
			<tr><td>100005</td><td>大阪仮　後郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 鷺洲</td><td>24</td><td>360,000</td></tr>
			<tr><td>100006</td><td>大阪仮　六郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 玉川</td><td>25</td><td>370,000</td></tr>
			<tr><td>100007</td><td>大阪仮　七郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 玉川</td><td>26</td><td>380,000</td></tr>
			<tr><td>100008</td><td>大阪仮　八郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 野田</td><td>27</td><td>390,000</td></tr>
			<tr><td>100009</td><td>大阪仮　九郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 野田</td><td>28</td><td>400,000</td></tr>
			<tr><td>100010</td><td>大阪仮　十郎</td><td>男</td><td>本店　営業部</td><td>大阪府 大阪市福島区 野田</td><td>29</td><td>410,000</td></tr>
			<tr><td>100011</td><td>福島仮　太郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>30</td><td>420,000</td></tr>
			<tr><td>100012</td><td>福島仮　次郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>21</td><td>330,000</td></tr>
			<tr><td>100013</td><td>福島仮　三郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>22</td><td>340,000</td></tr>
			<tr><td>100014</td><td>福島仮　四郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>23</td><td>350,000</td></tr>
			<tr><td>100015</td><td>福島仮　後郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>24</td><td>360,000</td></tr>
			<tr><td>100016</td><td>福島仮　六郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>25</td><td>370,000</td></tr>
			<tr><td>100017</td><td>福島仮　七郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>26</td><td>380,000</td></tr>
			<tr><td>100018</td><td>福島仮　八郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>27</td><td>390,000</td></tr>
			<tr><td>100019</td><td>福島仮　九郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 福島</td><td>28</td><td>400,000</td></tr>
			<tr><td>100020</td><td>福島仮　十郎</td><td>男</td><td>東京事業部　営業部</td><td>大阪府 大阪市福島区 吉野</td><td>29</td><td>410,000</td></tr>
			<tr><td>100021</td><td>海外仮　太郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>30</td><td>1,420,000</td></tr>
			<tr><td>100022</td><td>海外仮　次郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>21</td><td>2,330,000</td></tr>
			<tr><td>100023</td><td>海外仮　三郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>22</td><td>3,340,000</td></tr>
			<tr><td>100024</td><td>海外仮　四郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>23</td><td>4,350,000</td></tr>
			<tr><td>100025</td><td>海外仮　後郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>24</td><td>5,360,000</td></tr>
			<tr><td>100026</td><td>海外仮　六郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>25</td><td>1,370,000</td></tr>
			<tr><td>100027</td><td>海外仮　七郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>26</td><td>1,380,000</td></tr>
			<tr><td>100028</td><td>海外仮　八郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>27</td><td>1,390,000</td></tr>
			<tr><td>100029</td><td>海外仮　九郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>28</td><td>1,400,000</td></tr>
			<tr><td>100030</td><td>海外仮　十郎</td><td>男</td><td>ニューヨーク支店　営業部</td><td>アメリカ　ニューヨーク州</td><td>29</td><td>1,410,000</td></tr>
			<tr><td>100031</td><td>西だ仮　太郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 阿波座</td><td>30</td><td>420,000</td></tr>
			<tr><td>100032</td><td>西だ仮　次郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 阿波座</td><td>21</td><td>330,000</td></tr>
			<tr><td>100033</td><td>西だ仮　三郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 立売堀</td><td>22</td><td>340,000</td></tr>
			<tr><td>100034</td><td>西だ仮　四郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 立売堀</td><td>23</td><td>350,000</td></tr>
			<tr><td>100035</td><td>西だ仮　後郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 立売堀</td><td>24</td><td>360,000</td></tr>
			<tr><td>100036</td><td>西だ仮　六郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 立売堀</td><td>25</td><td>370,000</td></tr>
			<tr><td>100037</td><td>西だ仮　七郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 立売堀</td><td>26</td><td>380,000</td></tr>
			<tr><td>100038</td><td>西だ仮　八郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 靱本町</td><td>27</td><td>390,000</td></tr>
			<tr><td>100039</td><td>西だ仮　九郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 靱本町</td><td>28</td><td>400,000</td></tr>
			<tr><td>100040</td><td>西だ仮　十郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 靱本町</td><td>29</td><td>410,000</td></tr>
			<tr><td>100041</td><td>江戸仮　太郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 靱本町</td><td>30</td><td>420,000</td></tr>
			<tr><td>100042</td><td>江戸仮　次郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>21</td><td>330,000</td></tr>
			<tr><td>100043</td><td>江戸仮　三郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>22</td><td>340,000</td></tr>
			<tr><td>100044</td><td>江戸仮　四郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>23</td><td>350,000</td></tr>
			<tr><td>100045</td><td>江戸仮　後郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>24</td><td>360,000</td></tr>
			<tr><td>100046</td><td>江戸仮　六郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>25</td><td>370,000</td></tr>
			<tr><td>100047</td><td>江戸仮　七郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>26</td><td>380,000</td></tr>
			<tr><td>100048</td><td>江戸仮　八郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>27</td><td>390,000</td></tr>
			<tr><td>100049</td><td>江戸仮　九郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>28</td><td>400,000</td></tr>
			<tr><td>100050</td><td>江戸仮　十郎</td><td>男</td><td>福岡事業部　営業部</td><td>大阪府 大阪市西区 江戸堀</td><td>29</td><td>410,000</td></tr>
		</tbody>
	</table>
	<script>
		$(document).ready(function() {
			pdfMake.fonts = {
				GenShin: {
					normal: 'GenShinGothic-Normal-Sub.ttf',
					bold: 'GenShinGothic-Normal-Sub.ttf',
					italics: 'GenShinGothic-Normal-Sub.ttf',
					bolditalics: 'GenShinGothic-Normal-Sub.ttf'
				}
				}
 			$('#example').DataTable( {
				dom: 'Bfrtip',
				buttons: [
					'copy', 'csv', 'excel', 'print',
					{
					extend: 'pdfHtml5',
					text: 'PDF',
					customize: function ( doc ) {
						doc.defaultStyle.font= 'GenShin';
					}
					}
				]
			} );
		} );
	</script>
</body>

フロントサイドだけで、Excel、PDF、CSVが出力できるのですね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up