堆栈内存溢出
  繁体   English   中英

数据表导出为 pdf 和带有图像的 excel

[英]Datatable export to pdf and excel with images

 原文  2017-06-26 13:50:24  3   2    javascript/ jquery/ excel/ pdf

问题描述

我必须生成一个表并将其导出为 html。 我最初尝试使用 php 和 phpexcel 执行此操作，但我的客户端服务器速度很慢（有时我的表有 2500 行）。 现在我尝试通过 jquery/ajax 获取表并安装 js 插件进行导出。 我目前正在使用数据表和我的代码视图，如下所示：

<!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>

工作示例： https : //jsbin.com/senufanozo/edit?html,output

它工作正常，2500 行对于此代码来说不是问题，但我无法导出图像。 非常需要pdf和excel中的图片。 我怎样才能导出它？

另外如何将 pdf 页面旋转为横向？

2 个解决方案

解决方案1
 0  2019-08-26 18:32:00

这可能是一个迟到的答案，但我会引导你找到解决方案。

首先，为了将PDF的方向从纵向更改为横向，假设您使用pdfHtml5 ，则需要将方向定义为以下orientation: 'landscape',这将帮助您以横向方式导出PDF文件。

使用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;

对图像进行编码后，您需要自定义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
        }
        }

这应该可以解决问题。

解决方案2
 0  2021-11-11 06:14:44

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.

相关问题 通过数据表在Mozilla中导出PDF或Excel C＃/ Javascript数据表导出到Excel和PDF 数据表删除列导出到 pdf 和 excel 如何在 php 的数据表中添加导出到 excel pdf 按钮 导出PDF中的HTML数据表 数据表导出到Excel jQuery DataTable Excel导出 将PHP数据表导出为PDF版本 将 Highcharts 数据表导出到 PDF - Angular 将数据表导出为多张表格 excel
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM