[英]Datatable export to pdf and excel with images
I must to generate a table and export it to html.我必须生成一个表并将其导出为 html。 I initially tried do this use php and phpexcel but my client server is to slow (some times my table has 2500rows).
我最初尝试使用 php 和 phpexcel 执行此操作,但我的客户端服务器速度很慢(有时我的表有 2500 行)。 Now I'm try get table via jquery/ajax and install js plugin to export.
现在我尝试通过 jquery/ajax 获取表并安装 js 插件进行导出。 I am currently using datatables and my code view like this:
我目前正在使用数据表和我的代码视图,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.material.min.css" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<style>img{max-width:100px;max-height:100px;}</style>
<table class="table table-striped table-bordered table-hover zaawansowana_edycja " style="font-size:12px;">
<thead class="konfiguratorHeaderTable">
<tr class="obr getdataKrzeselko">
<td></td>
<td data-krzeselkoid="15">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="3">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="5">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="4">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="8">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="2">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="14">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="17">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="11">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
<td data-krzeselkoid="12">
<img class="img-responsive" src="http://www.ikea.com/PIAimages/0238233_PE377690_S5.JPG">
</td>
</tr>
<tr>
<td></td>
<td>
t1 </td>
<td>
t2 </td>
<td>
t2 </td>
<td>
t3 </td>
<td>
t4 </td>
<td>
twer </td>
<td>
gsdf </td>
<td>
dfst </td>
<td>
fd </td>
<td>
ef </td>
</tr>
</thead>
<tbody id="insertHereTbodyContent" style="height: 263px;">
<tr class="konfiguratorAttr" key="39|39">
<td> asdasd </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][436][id_krzesla]" value="15"> 72.4000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][437][id_krzesla]" value="3"> 38.4000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651249][id_krzesla]" value="5"> 41.0000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651306][id_krzesla]" value="4"> 29.0000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651363][id_krzesla]" value="8"> 40.0000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651417][id_krzesla]" value="2"> 30.9100 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651603][id_krzesla]" value="14"> 36.0000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651681][id_krzesla]" value="17"> 23.0000 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651735][id_krzesla]" value="11"> 39.6050 </td>
<td class="inputRow" konfigurator="1" key="39|39">
<input type="hidden" name="produkt[39|39][krzeselka][4495452651780][id_krzesla]" value="12"> 32.0000 </td>
</tr>
<tr class="konfiguratorAttr" key="2|39">
<td> asd / zxcvz </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][438][id_krzesla]" value="15"> 69.3710 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][439][id_krzesla]" value="3"> 15.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652035][id_krzesla]" value="5"> 41.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652101][id_krzesla]" value="4"> 29.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652239][id_krzesla]" value="8"> 40.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652254][id_krzesla]" value="2"> 30.9100 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652401][id_krzesla]" value="14"> 36.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652392][id_krzesla]" value="17"> 23.0000 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652515][id_krzesla]" value="11"> 37.3748 </td>
<td class="inputRow" konfigurator="1" key="2|39">
<input type="hidden" name="produkt[2|39][krzeselka][4495452652524][id_krzesla]" value="12"> 32.0000 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
<td>
<button class="dodajTkanineDoKrzeselka" href="/excel/show-konfiguruj-excel-raw-table?id=8">+</button>
</td>
</tr>
</tfoot>
</table>
<script>
$('table').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Data export'
},
{
extend: 'pdfHtml5',
title: 'Data export'
}
]
} );
</script>
</body>
</html>
Working example: https://jsbin.com/senufanozo/edit?html,output工作示例: https : //jsbin.com/senufanozo/edit?html,output
It works fine and 2500 rows it's not problem for this code but I can't export images.它工作正常,2500 行对于此代码来说不是问题,但我无法导出图像。 Pictures in pdf and excel are very much needed.
非常需要pdf和excel中的图片。 How I can export it ?
我怎样才能导出它?
Additionaly how rotate pdf page to landscape ?另外如何将 pdf 页面旋转为横向?
It might be a late answer however I'm gonna lead you to a solution. 这可能是一个迟到的答案,但我会引导你找到解决方案。
First in order to change the orientation of PDF from Portrait to Landscape assuming your using pdfHtml5
you need to define the orientation as following orientation: 'landscape',
this will help you export the PDF file in landscape. 首先,为了将PDF的方向从纵向更改为横向,假设您使用
pdfHtml5
,则需要将方向定义为以下orientation: 'landscape',
这将帮助您以横向方式导出PDF文件。
Exporting images with PDF requires a customization and to encode your image you can't export the images as a normal HTML tag you shall at first encode it as base64 encoder
使用PDF导出图像需要自定义并对图像进行编码,您无法将图像导出为普通的HTML标记,您应首先将其编码为
base64 encoder
$image = 'http://localhost/img.jpg';
// Read image path, convert to base64 encoding
$type = pathinfo($image, PATHINFO_EXTENSION);
$data = file_get_contents($image);
$imgData = base64_encode($data);
// Format the image SRC: data:{mime};base64,{data};
$src = 'data:image/' . $type . ';base64,'.$imgData;
After encoding the images you need to customize your PDF export as following 对图像进行编码后,您需要自定义PDF导出,如下所示
{
extend: 'pdfHtml5',
orientation: 'landscape',
customize: function (doc) {
if (doc) {
for (var i = 1; i < doc.content[1].table.body.length; i++) {
doc.content[1].table.body[i][1] = {
image: '<?php echo $src; ?>,
};
}
}
},
exportOptions: {
stripHtml: false
}
}
This should do the trick. 这应该可以解决问题。
extend: 'pdfHtml5',
customize: function(doc) {
//find paths of all images, already in base64 format
var arr2 = $('.img-fluid').map(function(){
return this.src;
}).get();
for (var i = 0, c = 1; i < arr2.length; i++, c++) {
doc.content[1].table.body[c][6] = {
image: arr2[i],
width: 100
}
}
},
exportOptions: {
columns: ':visible',
stripHtml: true,
}},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.