jQuery DataTablesのExport機能で表示している一覧表をPDFなどに出力できます。
HTML5 export buttons
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が出力できるのですね。