在 React js 或 HTML 中打印 div – 一个简单的 JavaScript 函数

你知道如何在react js或HTML中打印div吗？

在我告诉你如何之前。我想告诉你我正在创作这篇文章。几天前，我参与了一个具有发票查看选项的 CRM 项目。我的客户需要一个打印发票的选项。

我在网上搜索并尝试了不同的方法。它可以与 HTML 一起使用，但不能与 React js 一起使用。所以我修改了代码并在reactjs上完美运行。因此，我与您分享所有代码，并将其作为文档保存在这里。

创建页面组件并将此功能添加到其中

const Print = () =>{     
  //console.log('print');  
  let printContents = document.getElementById('printablediv').innerHTML;
  let originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
 document.body.innerHTML = originalContents; 
}

现在我们可以在页面上创建一个可打印的 div。

<div  id='printablediv'>
    Print me
</div>

现在创建一个按钮来调用该函数

<button type="button" onClick={Print} > Print div</button>