Question

我想将HTML表格打印为PDF。它工作正常，但是HTML表中的每一行都有一个删除按钮，我不想打印该按钮。如何在PDF中排除该删除按钮？

<script>
function createPDF() {
  var sTable = document.getElementById('customer').innerHTML;

  var style = "<style>";
  style = style + "table {width: 100%;font: 17px Calibri;}";
  style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
  style = style + "padding: 2px 3px;text-align: center;}";
  style = style + "</style>";
  var win = window.open('', '', 'height=700,width=700');
  win.document.write('<html><head>');
  win.document.write('<title>localhost:5000</title>'); 
  win.document.write(style);          
  win.document.write('</head>');
  win.document.write('<body>');
  win.document.write(sTable);         
  win.document.write('</body></html>');
  win.document.close();     
  win.print();

Answer 1

只要是简单的字符串，就可以替换不需要的部分。

sTable.replace('<td>Delete Button</td>', '');

如果您的“删除按钮”是动态的，则正则表达式可能会很方便。

Answer 2

您可以简单地在要创建的HTML中设置一些CSS进行打印，以在打印时隐藏按钮。例如：

function createPDF() {
  var sTable = document.getElementById('customer').innerHTML;

  var style = "<style>";
  style = style + ".myButtonClass {display: none !important;}";
  style = style + "table {width: 100%;font: 17px Calibri;}";
  style = style + "table, th, td {border: solid 1px #DDD; border-collapse: collapse;";
  style = style + "padding: 2px 3px;text-align: center;}";
  style = style + "</style>";
  var win = window.open('', '', 'height=700,width=700');
  win.document.write('<html><head>');
  win.document.write('<title>localhost:5000</title>'); 
  win.document.write(style);          
  win.document.write('</head>');
  win.document.write('<body>');
  win.document.write(sTable);         
  win.document.write('</body></html>');
  win.document.close();     
  win.print();

Answer 3

据我所知，您想在打印视图中隐藏该按钮，而不是在实际的html页面上。

这就是您所需要的。

向包含删除按钮的class添加id或td。为print添加CSS媒体查询，如下所示：

@media print { 
          /* All your print styles go here */
     #deletBtn .delete-btn { display: none !important; } 
    }

每当您打印HTML时，它将隐藏按钮。

Here更多关于CSS媒体查询以供打印。

Here是演示。

从HTML表创建pdf时不包括删除按钮

3 个答案: