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

何处锦绣不灰堆

发布于 2020-05-29 14:49:14

8130

发布于 2020-05-29 14:49:14

文章被收录于专栏：农历七月廿一农历七月廿一

需求说明

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

效果预览

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

源码

/**
       * @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();
      },

<!--前台入账简表 - 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>