Jspdfを使用してHTMLテーブルデータをPDFにエクスポートする方法
HTMLページのテーブルをPDFにエクスポートするにはどうすればよいですか。サンプルデータをいくつか作成しましたが、HTMLテーブルリストをPDFに読み込むことができません。TablesをPDFに読み込むのを手伝ってください。
<!DOCTYPE html>
<html lang="en">
<head>
<title>html2canvas example</title>
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var specialElementHandlers = {
'#editor': function(element, renderer) { return true; }
};
$('#cmd').click(function() {
var doc = new jsPDF();
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
doc.save('sample-file.pdf');
});
});
</script>
</head>
<body id="target">
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<a class="upload">Upload to Imgur</a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</div>
<button id="cmd">generate PDF</button>
</body>
</html>
良いオプションは AutoTable（jsPDF用のテーブルプラグイン） です。テーマ、rowspan、colspanが含まれ、htmlからデータを抽出し、jsonで動作します。ヘッダーをパーソナライズして水平にすることもできます。 ここ はデモです。
jspdf用tablePlugin があり、オブジェクトの配列を想定し、そのデータを表として表示します。コードを少し変更するだけで、テキストとヘッダーのスタイルを設定できます。これはオープンソースであり、使用を開始するための例もあります。
これはあなたに役立つと思う例です
<!DOCTYPE html>
<html>
<head>
<script src="js/min.js"></script>
<script src="js/pdf.js"></script>
<script>
$(function(){
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
var table = tableToJson($('#StudentInfoListTable').get(0))
var doc = new jsPDF('p','pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
console.debug(row);
$.each(row, function (j, cell){
doc.cell(10, 50,120, 50, cell, i); // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
})
})
doc.save('sample-file.pdf');
});
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
// go through cells
for (var i=0; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.Push(rowData);
}
return data;
}
});
</script>
</head>
<body>
<div id="table">
<table id="StudentInfoListTable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Track</th>
<th>S.S.C Roll</th>
<th>S.S.C Division</th>
<th>H.S.C Roll</th>
<th>H.S.C Division</th>
<th>District</th>
</tr>
</thead>
<tbody>
<tr>
<td>alimon </td>
<td>Email</td>
<td>1</td>
<td>2222</td>
<td>as</td>
<td>3333</td>
<td>dd</td>
<td>33</td>
</tr>
</tbody>
</table>
<button id="cmd">Submit</button>
</body>
</html>
ここで出力
残念ながら、それを行うことはできません。
jsPDFはfromHTMLメソッドでの画像と表のエクスポートをサポートしていません。 jsPDF v0.9.0 rc2で
これらの手順に従うだけで、pdfファイルが生成されることを保証できます
<html>
<head>
<title>Exporting table data to pdf Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/from_html.js"></script>
<script type="text/javascript" src="js/split_text_to_size.js"></script>
<script type="text/javascript" src="js/standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/cell.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#exportpdf").click(function() {
var pdf = new jsPDF('p', 'pt', 'ledger');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
source = $('#yourTableIdName')[0];
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme' : function(element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
margins = {
top : 80,
bottom : 60,
left : 60,
width : 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width' : margins.width, // max width of content on PDF
'elementHandlers' : specialElementHandlers
},
function(dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('fileNameOfGeneretedPdf.pdf');
}, margins);
});
});
</script>
</head>
<body>
<div id="yourTableIdName">
<table style="width: 1020px;font-size: 12px;" border="1">
<thead>
<tr align="left">
<th>Country</th>
<th>State</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr>
<tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr><tr align="left">
<td>India</td>
<td>Telangana</td>
<td>Nirmal</td>
</tr>
</tbody>
</table></div>
<input type="button" id="exportpdf" value="Download PDF">
</body>
</html>
出力：
HTMLファイル出力： 
PDFファイルの出力： 
" jsPDFライブラリを適切に使用する方法 "は、必要なものをもう少し提供するかもしれません。テーブルは正しくレンダリングされません（ この回答ではcssはありません ）が、jqueryを使用してhtmlテーブルを解析し、手動でスタイルを設定できます。
別のオプションは、HTMLのスクリーンショットを HTML2Canvas または Casper.js で使用することです。
[〜＃〜] edit [〜＃〜]
Jspdf cellプラグインを使用した基本的な例を次に示します。 jqueryと HTML Table to JSON のtableToJson()関数を使用します。
Deflateライブラリ（2つのjsファイル）とjspdf.plugin.cell.js。
var table = tableToJson($('#table-id').get(0))
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
$.each(row, function (j, cell){
doc.cell(10, 200, 100, 20, cell, i);
})
})
doc.save()
入れてみて
doc.fromHTML($('#target').get(0), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
の代わりに
doc.fromHTML($('#target').html(), 15, 15, {
'width': 170,'elementHandlers': specialElementHandlers
});
Htmlテーブルデータをさまざまな形式にエクスポートする目的で、Datatable JSプラグインを使用しました。私の経験では、最小限のコーディングで非常にすばやく、使いやすく、構成できました。
以下は、データテーブルプラグインを使用したjquery呼び出しのサンプルです。#exampleはテーブルIDです
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
以下のデータテーブル参照リンクで完全な例を見つけてください：
https://datatables.net/extensions/buttons/examples/html5/simple.html
これは、構成後の様子です（参照サイトから）： 
次のライブラリ参照をHTMLに含める必要があります（上記の参照リンクで見つけることができます）
jquery-1.12.3.js
jquery.dataTables.min.js
dataTables.buttons.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js