WEB打印-根据需求打印局部源码记录

2020-05-29 14:49:14 浏览数 (2)

需求说明

这次的需求可能就比较简单了,就是实现web端的打印,但是是根据需求打印,而不是直接打印全部

效果预览

我要做的是一个简单的打印,就是客户选择了一个dialog,这个时候需要将这个记录打印出来,直接打印就可以了

源码
代码语言:javascript复制
/**
       * @printObj 打印
       * @param printWindow 接收页面元素
       * @param printContent 写入需要打印的元素
       */
      printObj(print_element){
        let printWindow;
        let printContent = document.getElementById(print_element).innerHTML;
        printWindow = window.open('','_blank','width=500,height=300,location=0,menubar=0,status=0,toolbar=0,scrollbars=1');
        printWindow.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache"><meta name="keywords" content="" /><meta name="description" content="" /><title></title></head><body>');
        printWindow.document.write('<div style="width:100%; height:100%; overflow:hidden;">' printContent "</div>");
        printWindow.document.write("</body></html>");
        printWindow.focus();
        printWindow.document.close();
        printWindow.print();
        printWindow.close();
      },
代码语言:javascript复制
<!--前台入账简表 - dialog-->
    <el-dialog title="前台入账简表" id="print_003" :close-on-click-modal = 'false'  :visible.sync="dialogTableVisible_003">
      <el-table :data="gridData_003" height="400" :cell-style="{textAlign:'center'}"
                :header-cell-style="{textAlign:'center'}" size="mini">
        <el-table-column property="amount" label="amount"></el-table-column>
        <el-table-column property="code" label="代码"></el-table-column>
        <el-table-column property="count" label="数量"></el-table-column>
      </el-table>
      <button @click="printObj('print_003')" style="width: 80px;height: 27px;line-height: 27px;margin-top: 10px;color: #FFFFFF;border: none;border-radius: 4px;background: #4488E9">打印</button>
    </el-dialog>
  • 这里需要 注意的是一点,就是打印的时候如果显示的不完全的话,可以直接选择横向打印,或者下面的更多选项中选择无边框打印就不会出现这样的问题了。
  • 当然如果只是打印当前的页面的话,那就是直接window.print就可以了。不应处理别的。

js 是参考了别人的写的,只是根据自己的需求改的,改了以后分享给大家,觉得可以用的可以直接拿去使用就可以了。

0 人点赞