文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用<a>中的pdfhtml5导出DataTables标记

问如何使用<a>中的pdfhtml5导出DataTables标记
EN

Stack Overflow用户

提问于 2022-10-21 12:03:21

回答 2查看 90关注 0票数 1

我希望使用<a>导出DataTables中的单元格中的pdfhtml5标记或链接。

到目前为止，链接显示为纯文本。我如何打印它，包括它的格式？

jquery

datatables

pdfmake

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-21 13:25:21

这是一个分两步的过程：

步骤1

使用DataTables exportOptions.format函数将完整的exportOptions.format文本传递给PDF (而不是仅仅传递内部文本)。

exportOptions: {
  format: {
    body: function ( inner, rowidx, colidx, node ) {
      console.log( "in format" );
      return inner;
    }
  }
}

步骤2

处理PDF文档，将HTML标记转换为<a>。

为此，您可以使用DataTables customize函数。

customize: function ( doc ) {
  processDoc(doc);
}

上面引用的processDoc函数在下面的可运行演示中提供。它使用JavaScript从HTML中提取链接并显示文本。它还添加了一些样式，使最终结果看起来更像一个可点击的链接。

$(document).ready(function() {

  var table = $('#example').DataTable( {
    dom: 'Brftip',
    buttons: [
      { 
        extend: 'pdfHtml5', 

        exportOptions: {
          format: {
            body: function ( inner, rowidx, colidx, node ) {
              return inner;
            }
          }
        },

        customize: function ( doc ) {
          processDoc(doc);
        }

      }  
    ]
  } );

} );

function processDoc( doc ) {
  let tableBody = doc.content[1].table.body;
  tableBody.forEach(function( row ) {
    row.forEach(function( cell ) {
      let cellText = cell.text;
      if (cellText.startsWith( '<a href=' )) {

        let textStart = cellText.indexOf(">") +1;
        let textEnd = cellText.indexOf("<", textStart);
        let text = cellText.substring(textStart, textEnd);

        let linkStart = cellText.indexOf("\"") +1;
        let linkEnd = cellText.indexOf("\"", linkStart);
        let link = cellText.substring(linkStart, linkEnd);

        cell.text = text;
        cell.link = link;
        cell.color =  '#1a0dab';
        cell.decoration = 'underline';
      }
    });
  });
}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css"/>
 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.js"></script>

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td><a href="https://en.wikipedia.org/wiki/Edinburgh">Edinburgh</a></td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td><a href="https://en.wikipedia.org/wiki/New_York_City">New York</a></td>
            </tr>
        </tbody>
    </table>

</div>



</body>
</html>

以上演示的最终结果PDF如下所示：

注意:如果您在其他列中有其他不想处理的HTML，那么您可能需要改进您的body函数-因此，如下所示：

if ($(node).children('a').length > 0) {
  return whatever you need here;
} else {
  return inner;
}

后续问题(来自评论)：

如果我在一个单元格中有多个链接，怎么样？怎么出口呢？

是的，有很多种方法可以做到这一点。

由于您已经在使用jQuery (对于DataTables)，所以可以使用jQuery的parseHTML()函数。这会将HTML字符串(作为文本)转换为相关HTML节点的数组。

然后，您可以遍历数组，一次处理每个链接(还可以处理可能位于同一数据单元格中的任何其他文本)。

一个基本的例子：

让我们假设一个包含以下内容的DataTable单元：

Some text <a href="whateverA">Edinburgh</a> and then <a href="whateverB">New York</a> the end.

parseHTML()函数将此函数拆分为包含以下5个独立节点的数组--然后您可以将其作为5个单独的字符串处理：

Some text 
<a href="whateverA">Edinburgh</a>
 and then 
<a href="whateverB">New York</a>
 the end.

以下是这方面的演示：

let str = 'Some text <a href="whateverA">Edinburgh</a> and then <a href="whateverB">New York</a> the end.'
let nodes = $.parseHTML( str );
nodes.forEach(function( node ) {
  if ( node.nodeType === Node.TEXT_NODE ) {
    console.log( node.data ); // handle as PDF plain string
  } else {
    console.log( node.outerHTML ); // handle as PDF link
  }
})

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>New tab</title>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    </head>
    <body>
        <div>See the results in the console, below.</div>
    </body>
</html>

最后步骤：

现在，不需要创建一个只包含一个PDF格式链接的PDF单元，而是需要创建一个包含5个PDF元素的数组(参见示例这里)，并将该数组添加到单元格中。

myPdfCellContent: [ 
  'Some text ',
  { text: 'Edinburgh', link: 'whateverA' },
  ' and then ',
  { text: 'New York', link: 'whateverB' },
  ' the end.'
]

您可以将此方法集成到现有的DataTables解决方案中，以处理一个单元格中的多个链接。

票数 0

Stack Overflow用户

发布于 2022-10-26 10:47:51

谢谢您的解决方案，我尝试将其集成到您的第一个解决方案中，但没有成功--它只显示了一个链接。少了什么？下面是我的方法。

单元格文本的值为{link 1 link 2}

function processDoc(doc) {

let tableBody = doc.content[1].table.body;

tableBody.forEach(function(row) {
    row.forEach(function(cell) {
        let cellText = cell.text;
        let nodes = $.parseHTML(cellText);


        nodes.forEach(function(node) {
         
            if (node.nodeType != Node.TEXT_NODE) {
                if (node.outerHTML.startsWith('<a href=')) {
                    let textStart = node.outerHTML.indexOf(">") + 1;
                    let textEnd = node.outerHTML.indexOf("<", textStart);
                    let text = node.outerHTML.substring(textStart, textEnd);

                    let linkStart = node.outerHTML.indexOf("\"") + 1;
                    let linkEnd = node.outerHTML.indexOf("\"", linkStart);
                    let link = node.outerHTML.substring(linkStart, linkEnd);

                    cell.text = text;
                    cell.link = link;
                    cell.color = '#1a0dab';
                    cell.decoration = 'underline';
                }
            }

        });

    });
});

}

它显示：示例1，而不是示例1，示例2

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74153344

复制

相似问题

问如何使用<a>中的pdfhtml5导出DataTables标记
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用<a>中的pdfhtml5导出DataTables标记EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用<a>中的pdfhtml5导出DataTables标记
EN