前端打印功能实现(原生实现,无需导任何包)

发布时间:2024-01-11 09:00

打印功能实现

效果预览

前端打印功能实现(原生实现,无需导任何包)_第1张图片

目录

  • 打印功能实现
  • 效果预览
  • 一、html 写法
  • 二、js或ts写法
  • 总结


一、html 写法

<div id="exportableTable" style="display: none;">
      <table border="1" style="border-collapse:collapse;width: 100%;text-align: center;">
        <tr rowspan="2">
          
          <th colspan="7">经费账(科目:)th>
        tr>
        <tr cospan="7">
          
          <th rowspan="2">日期th>
          <th rowspan="1">凭证th>
          <th rowspan="2">摘要th>
          <th rowspan="2">收方th>
          <th rowspan="2">付方th>
          <th rowspan="2">收或付th>
          <th rowspan="2">余额th>
        tr>
        <tr cospan="7">
          
          <th rowspan="1">顺序号th>
        tr>
        
        <tr>
          <td>1td>
          <td>2td>
          <td>3td>
          <td>4td>
          <td>5td>
          <td>6td>
          <td>7td>
        tr>
      table>
    div>

二、js或ts写法

代码如下(示例):

    printFee () {

      const printContent = document.getElementById("exportableTable");

      // window.open() 弹出窗口
      const WindowPrt = window.open('', '', 'left=500px,top=500px,width=900,height=900,toolbar=0,scrollbars=0,status=0');//弹出一个空的窗口(设置好宽高)

      // write()方法用于写入文档内容,可以传多个参数,写入的字符串会按HTML解析
      WindowPrt.document.write(printContent.innerHTML);

      // 运行document.write(),运行完后,最好手动关闭文档写入document.close()
      WindowPrt.document.close();

      //方法将焦点设置到当前窗口,也就是将窗口显示在前(靠近屏幕)
      WindowPrt.focus();

      // 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。
      WindowPrt.print();

      // window.close()关闭浏览器窗口
      WindowPrt.close();
    }

总结

关键在于html要使用 id=‘exportableTable’ , js通过document.getElementById(“exportableTable”)将要打印的内容获取,
通过.write()写入文档内容到新弹出的窗口,
再调用 print() 方法产生一个打印预览弹框,即可实现打印

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号