【问题标题】:<br/> tag in HTML title breaks pdfmake export in jQuery DataTablesHTML 标题中的 <br/> 标记破坏了 jQuery DataTables 中的 pdfmake 导出
【发布时间】:2018-11-14 11:23:23
【问题描述】:

我正在尝试格式化数据在 jquery DataTable 中的显示方式。

如果文本很长,我会像下面这样截断它:

{
"data": "col1", "render": function (data, type, row) {
        if (type === 'display' && data != null) {
              data = data.replace(/<(?:.|\\n)*?>/gm, '');
              data = data.split("; ").join("<br/>");
                  if (data.length > 85) {

                      return '<span class=\"show-ellipsis\" title="'+data+'">' + data.substr(0, 85) + '</span><span class=\"no-show\">' + data.substr(85) + '</span>';
                  } else {
                      return data;
                  }
        } else {
           return data;
        }
   }
},

并在 jquery UI 工具提示旁边使用以下 CSS。

CSS

 span.no-show {
    display: none;
}

span.show-ellipsis:after {
    content: "...";
}

jQuery UI 工具提示

<script>
$(function () {
    $(document).tooltip({
        items: 'span.show-ellipsis',
        content: function () {
            return $(this).attr('title');
        },
        position: {
            my: "center bottom",
            at: "center top-10",
            collision: "flip",
            using: function (position, feedback) {
                $(this).addClass(feedback.vertical)
                    .css(position);
            }
        }

    });

});


这样它在DataTable中看起来很好,

上面的截图在替换方法中有&lt;hr&gt;而不是&lt;br/&gt;标签,但行为保持不变。如果我用\n 替换它就可以了。当我尝试导出 pdf 时,数据会重复。特别是 data.substr(85) 部分。

我做错了什么?

谢谢

【问题讨论】:

  • 好像你导出的PDF没有考虑CSS?
  • 是的 display: none 部分。但是为什么像这样调用方法时会考虑到它data = data.split("; ").join("\n"); ?

标签: javascript jquery html datatables pdfmake


【解决方案1】:

好的,在你的按钮中

                extend: 'pdfHtml5',
                exportOptions: {
                    orthogonal: 'export',
                }

在您的专栏中:

        render: function (data, type, row) {
        return type === 'export' ? row.Descripcion: "";
     }

【讨论】:

    猜你喜欢
    • 2017-08-30
    • 1970-01-01
    • 2023-01-26
    • 2020-07-19
    • 1970-01-01
    • 2015-08-18
    • 2017-03-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多