精华内容
下载资源
问答
  • 上图就是打印的效果,但表格的样式没有出来,在vue-cli脚手架里样式是起作用的。 这个打印是用的原生javascript的方法实现的,但引用了vue.js和element 代码如下: <!DOCTYPE html> <html> <...

    第一种表格

    先上效果图:
    在这里插入图片描述
    在这里插入图片描述
    上图就是打印的效果,但表格的样式没有出来,在vue-cli脚手架里样式是起作用的。
    这个打印是用的原生javascript的方法实现的,但引用了vue.jselement

    代码如下:

      <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>vue中打印</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
            <style>
             #printTest table{
             font-family:"宋体";
             border-collapse:collapse;
             width:99.5%;
             }
             #printTest table thead th{
             height: 40px;
             font-size: 13px;
             /* width: 10px; */
             text-align: center;
             border: 1px solid black;
             }
             #printTest table tbody tr{
             font-size:13px;
             border: 1px solid black;
             height: 40px;
             text-align: center;
             }
             #printTest table tbody td{
             font-size: 13px;
             text-align: center;
             border: 1px solid black;
             }
            </style>
        </head>
        <body>
            <div id="apps">
                <el-button class="filter-item" @click="handleFinish" type="primary">打印</el-button>
                <el-dialog title="详情单" :close-on-click-modal="false" :visible.sync="printDialogVisible"
                    width="60%">
                    <el-button type="success"  @click="yinp">
                        <svg-icon icon-class="print" />打印</el-button>
                    <div id="printTest">
                        <div style="font-size: 22px;padding-bottom:10px;font-weight:800;font-family:宋体; text-align:center">表单
                        </div>
                        <span style="font-size:16px;font-family:宋体;float:left;">客户名称:</span>
                        <span style="font-size:16px;font-family:宋体;float:right;">日期:20190803</span>
                        <table>
                            <thead>
                                <th>日期</th>
                                <th>名字</th>
                                <th>地址</th>
                                <th>爱好</th>
                                <th>数量</th>
                                <th>运动</th>
                                <th>备注</th>
                            </thead>
                            <tbody>
                                <tr v-for="item in tableData" :key="item.id">
                                    <td>{{item.date}}</td>
                                    <td>{{item.name}}</td>
                                    <td>{{item.address}}</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-dialog>
        
            </div>
        </body>
        <script src="https://cdn.bootcss.com/vue/2.5.1/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/element-ui/2.3.9/index.js"></script>
        
        <script>
        var apps = new Vue({
            el:'#apps',
            data(){
                return{
                printDialogVisible:false,
                 tableData: [{
                 id:1,
                 date: '2016-05-02',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄'
                 }, {
                 id:2,
                 date: '2016-05-04',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1517 弄'
                 }, {
                 id:3,
                 date: '2016-05-01',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1519 弄'
                 }, {
                 id:4,
                 date: '2016-05-03',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1516 弄'
                 }]
                }
            },
          methods: {
              handleFinish(){
              this.printDialogVisible = true
              },
              yinp(){
                var newstr = document.getElementById("printTest").innerHTML;//得到需要打印的元素HTML
                var oldstr = document.body.innerHTML
                document.body.innerHTML = newstr;
                window.print();
                document.body.innerHTML = oldstr;
              },
          },
        })
        </script>
        </html>
    

    第二种表格
    在这里插入图片描述
    这个是vue-cli脚手架里用的打印功能。
    通过npm 安装插件

    1,安装 npm install vue-print-nb --save

    2,引入 安装好以后在main.js文件中引入

      import Print from 'vue-print-nb'
     Vue.use(Print);  //注册
    

    3,现在就可以使用了

      <div id="printTest" >
        
              <p>锄禾日当午</p>
        
              <p>汗滴禾下土 </p>
        
              <p>谁知盘中餐</p>
        
              <p>粒粒皆辛苦</p>
        
            </div>
        
            <button v-print="'#printTest'">打印</button>
    

    现在就把表格代码贴出来:

      <el-dialog title="设备厂内迁移单预览" v-dialogDrag :close-on-click-modal="false" :visible.sync="printDialogVisible" width="99.5%">
                <el-button type="primary" @click="printDialogVisible = false">返回</el-button>
                <el-button type="success" v-print="'#printTest2'"><svg-icon icon-class="print"/>打印</el-button>
        				<div id="printTest2">
        					<table border= "0" width="99.5%">
                  <thead>
                           <tr>
                             <th colspan="12">{{daolist.transferInCompanyName}}</th>
                           </tr>
                           <tr>
                              <th colspan="12">设备厂内迁移单</th>
                           </tr>
                           <tr>
                             <td colspan="12"><span>调出单位:{{daolist.transferOutCompanyName}} / {{daolist.transferOutFactoryName}} / {{daolist.transferOutDepartmentName}}</span></td>
                           </tr>
                            <tr>
                             <td colspan="6"><span>调入单位:{{daolist.transferInCompanyName}} / {{daolist.transferInFactoryName}} / {{daolist.transferInDepartmentName}}</span></td>
                             <td colspan="6" style="text-align:right"><span>编号:{{daolist.formCode}}</span></td>
                           </tr>
        
                     </thead>
        
                    <tbody>
                      <tr >
                        <td rowspan="2" style="text-align:center;border:1px solid black;">固定资产编号</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">设备名称</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">型号规格</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">出厂编号</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">制造厂家</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">数量</td>
        
                        <td rowspan="2" style="text-align:center;border:1px solid black;">单位</td>
                        <td colspan="2" style="text-align:center;border:1px solid black;">年限</td>
                        <td colspan="2" style="text-align:center;border:1px solid black;">固定资产价值(元)</td>
                        <td rowspan="2" style="text-align:center;border:1px solid black;">备注</td>
                        
                      </tr>
                      <tr>
                        <td style="text-align:center;border:1px solid black;">折旧</td>
                        <td style="text-align:center;border:1px solid black;">已用</td>
                        <td style="text-align:center;border:1px solid black;">原值</td>
                        <td style="text-align:center;border:1px solid black;">净值</td>
                      </tr>
        
                     
                       <tr style="height:50px">
                        <td style="text-align:center;border:1px solid black;">{{daolist.fixedAssetCode}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.equipName}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.equipType}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.serialNumber}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.manufacturer}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.nums}}</td>
        
                        <td style="text-align:center;border:1px solid black;"></td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.depreciationPeriod}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.usedPeriod}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.originalFinancialValue}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.netBookValue}}</td>
                        <td style="text-align:center;border:1px solid black;">{{daolist.remark}}</td>
                      
                      </tr>
                   <tr style="height:70px">
                     <td colspan="1" style="border:1px solid black">调拨原因</td>
                     <td colspan="11" style="text-align:left;border:1px solid black">{{daolist.reason}}</td>
                   </tr>
                    <tr style="height:70px">
                     <td colspan="1" style="border:1px solid black">其他说明</td>
                     <td colspan="11" style="text-align:left;border:1px solid black">{{daolist.otherDescription}}</td>
                   </tr>
                   <tr style="height:50px">
                     <td colspan="2" style="border:1px solid black">经办人签字</td>
                     <td colspan="3" style="border:1px solid black">设备科长签字</td>
                     <!-- <td colspan="2">调出厂签字</td> -->
                     <td colspan="2" style="border:1px solid black">设备副总签字</td>
                     <td colspan="3" style="border:1px solid black">资产部副部长签字</td>
                     <td colspan="2" style="border:1px solid black">资产部盖章</td>
                   </tr>   
                   <tr style="height:50px">
                     <td colspan="2" style="border:1px solid black;border-bottom:none" align=“left” valign="top"><div style="width:265px">意见:{{operator}}</div></td>
                     <td colspan="3" style="border:1px solid black;border-bottom:none" align=“left” valign="top"><div style="width:265px">意见:{{branch}}</div></td>
                     <!-- <td colspan="2" align=“left” valign="top">意见:</td> -->
                     <td colspan="2" style="border:1px solid black;border-bottom:none" align=“left” valign="top"><div style="width:205px">意见:{{fuzong}}</div></td>
                     <td colspan="3" style="border:1px solid black;border-bottom:none" align=“left” valign="top"><div style="width:265px">意见:{{zichan}}</div></td>
                     <td colspan="2" style="border:1px solid black;border-bottom:none" align=“left” valign="top"><div style="width:265px">意见:</div></td>
                   </tr>
                     <tr style="height:40px">
                     <td colspan="2" style="border:1px solid black;border-bottom:none;border-top:none">经办人:{{operatorname}}</td>
                     <td colspan="3" style="border:1px solid black;border-bottom:none;border-top:none">经办人:{{branchname}}</td>
                     <!-- <td colspan="2" style="border-top:1px solid #fff">经办人:</td> -->
                     <td colspan="2" style="border:1px solid black;border-bottom:none;border-top:none">经办人:{{fuzongname}}</td>
                     <td colspan="3" style="border:1px solid black;border-bottom:none;border-top:none">经办人:{{zichanname}}</td>
                     <td colspan="2" style="border:1px solid black;border-bottom:none;border-top:none">经办人:</td>
                   </tr>
                   <tr style="height:40px">
                     <td colspan="2" style="border:1px solid black;border-top:none">日期:{{operatordate}}</td>
                     <td colspan="3" style="border:1px solid black;border-top:none">日期:{{branchdate}}</td>
                     <!-- <td colspan="2" style="border-top:1px solid #fff">日期:</td> -->
                     <td colspan="2" style="border:1px solid black;border-top:none">日期:{{fuzongdate}}</td>
                     <td colspan="3" style="border:1px solid black;border-top:none">日期:{{zichandate}}</td>
                     <td colspan="2" style="border:1px solid black;border-top:none">日期:</td>
                     </tr>
                    </tbody>
                  </table>
        				</div>
        			</el-dialog>
    

    这个是一个弹框里的内容。
    css代码:

      #printTest2 table{
          border-collapse:collapse;
        }
        #printTest2 table thead th{
          font-size: 20px;
          padding:10px;
        }
        #printTest2 table tbody tr{
          height:30px;
          font-size:14px;
        }
    
        #printTest2 table tbody td span{
          margin-right:20px;
        }
    

    第三种表格的写法在这里插入图片描述
    这个几种表格的格式是不一样的:

    代码:

      <el-dialog title="设备报修单预览" v-dialogDrag :close-on-click-modal="false" :visible.sync="printDialogVisible" width="60%">
                <el-button type="primary" @click="printDialogVisible = false">返回</el-button>
                <el-button type="success" v-print="'#printTest1'"><svg-icon icon-class="print"/>打印</el-button>
        				<div id="printTest1">
                   <!-- <h2 style="text-align:center;">{{srintList.repairCompany}}设备报修单</h2> -->
                  
        					<table border= "0" width="99%" >
                    <thead>
                           <tr>
                               <th colspan="8">{{srintList.repairCompany}}设备报修单</th>
                           </tr>
                    </thead>
                    <tbody>
                      <tr style="height:60px">
                        <td style="border:1px solid black">设备名称</td>
                        <td style="border:1px solid black" colspan="3">{{srintList.equipmentName}}</td>
                        <td style="border:1px solid black" colspan="3">固定资产编号</td>
                        <td style="border:1px solid black" colspan="1">{{srintList.fixedAssetCode}}</td>
                      </tr>
                     
                      <tr style="height:60px">
                        <td style="border:1px solid black">型号规格</td>
                        <td style="border:1px solid black" colspan="3">{{srintList.model}}</td>
                        <td style="border:1px solid black" colspan="3">报修时间</td>
                        <td style="border:1px solid black" colspan="1">{{srintList.repariDate}}</td>
                      </tr>
                       <tr style="height:60px">
                        <td style="border:1px solid black">电路板名称</td>
                        <td style="border:1px solid black" colspan="3">{{srintList.circuitBoardName}}</td>
                        <td style="border:1px solid black" colspan="3">电路板型号</td>
                        <td style="border:1px solid black" colspan="1">{{srintList.circuitBoardModel}}</td>
                      </tr >
                       <tr style="height:60px">
                        <td style="border:1px solid black">报修部门</td>
                        <td style="border:1px solid black" colspan="3">{{srintList.repairDivision}}</td>
                        <td style="border:1px solid black" colspan="3">要求完成时间</td>
                        <td style="border:1px solid black" colspan="1">{{srintList.requestDate}}</td>
                      </tr>
                      <tr>
                       <td colspan="8" style="height:40px;border:1px solid black">
                        <!-- <input type="checkbox" id="cheni1"><span>外部维修</span>
                        <input type="checkbox" id="cheni2"><span>内部维修</span> -->
                         <span style="margin-left:170px">外部维修(<span v-if="suggestShow"></span>)</span><span style="margin-left:120px">内部维修(<span v-if="sugg"></span>)</span>
                       </td>
                     </tr>
                      <tr style="height:100px">
                        <td colspan="8" style="border:1px solid black" align="left" valign="top">
                          <div>故障原因及内容:{{srintList.causeReason}}</div>
                          </td>
                      </tr>
                    
                     
                      <tr style="height:100px">
                        <td colspan="8" align="left" valign="top" style="height:50px;border:1px solid black;border-bottom:none">设备科审核意见:{{fixing}}</td>
                      </tr>
                      <tr style="border-top:0px solid white;">    
                        <td colspan="8" align="right" style="border:1px solid black;border-top:none"><span>签字:{{fixingName}}</span><span>日期:{{fixingDate}}</span></td>
                      </tr>
                      <tr style="height:100px">
                        <td colspan="8" align="left" valign="top" style="height:50px;border:1px solid black;border-bottom:none">厂长审核意见:{{factoryst}}</td>
                      </tr>
                      <tr style="border-top:0px solid white;"> 
                        <td colspan="8" align="right" style="border:1px solid black;border-top:none"><span>签字:{{factorystName}}</span><span>日期:{{factorystDate}}</span></td>
                      </tr>
                       <tr style="height:100px">
                        <td colspan="8" align="left" valign="top" style="height:50px;border:1px solid black;border-bottom:none">事业部分管副总意见:{{enterprise}}</td>
                      </tr>
                      <tr style="border-top:0px solid white;">
                        <td colspan="8" align="right" style="border:1px solid black;border-top:none"><span>签字:{{enterpriseName}}</span><span>日期:{{enterpriseDate}}</span></td>
                      </tr>
                      <tr style="height:100px">
                        <td colspan="8" align="left" valign="top" style="height:50px;border:1px solid black;border-bottom:none">资产部意见:{{propertyst}}</td>
                      </tr>
                      <tr style="border-top:0px solid white;">  
                        <td colspan="8" align="right" style="border:1px solid black;border-top:none"><span>签字:{{propertystName}}</span><span>日期:{{propertystDate}}</span></td>
                      </tr>
                     
                    </tbody>
                  </table>
        				</div>
        			</el-dialog>
    

    css代码:

     #printTest1 table{
          border-collapse:collapse;
        }
        #printTest1 table thead th{
          font-size: 20px;
          padding:10px;
        }
        #printTest1 table tbody tr{
          height:30px;
          font-size:14px;
        }
        #printTest1 table tbody td{
          width:25%;
        }
        #printTest1 table tbody td span{
          margin-right:20px;
        } 
    

    第四种和第一种是一样的只不过是放在了vue-cli脚手架里在这里插入图片描述
    代码:

      <el-dialog title="材料出库单" v-dialogDrag :close-on-click-modal="false" :visible.sync="printDialogVisible" width="60%">
                              <el-button type="success" v-print="'#printTest'"><svg-icon icon-class="print"/>打印</el-button>
                              <div id="printTest">
                                  <div style="font-size: 22px;padding-bottom:10px;font-weight:800;font-family:宋体; text-align:center">出库单</div>
                                  <span style="font-size:16px;font-family:宋体;float:left;">客户名称:</span>
                                  <span style="font-size:16px;font-family:宋体;float:right;">出库日期:20190803</span>
                                  	<table>
                                     <thead>
                                        <th>材料编号</th>
                                        <th>材料名称</th>
                                        <th>单位</th>
                                        <th>订单号</th>
                                        <th>数量</th>
                                        <th>箱数</th>
                                        <th>备注</th>                                 
                                     </thead>
                                       <tbody>
                                            <tr v-for="item in tableData" :key="item.id">
                                                <td>{{item.date}}</td>
                                                <td>{{item.name}}</td>
                                                <td>{{item.address}}</td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                      </table>
                                </div>
                              </el-dialog>
    

    css代码:

       #printTest table{
            font-family:"宋体";
            border-collapse:collapse;
            width:99.5%;
        }
        #printTest table thead th{
            height: 40px;
            font-size: 13px;
            /* width: 10px; */
            text-align: center;
            border: 1px solid black;
        }
        #printTest table tbody tr{
            font-size:13px;
            border: 1px solid black;
            height: 40px;
            text-align: center;
        }
        #printTest table tbody td{
            font-size: 13px;
            text-align: center;
            border: 1px solid black;
        }
    
    展开全文
  • java打印Excel表格

    千次阅读 2018-03-26 11:14:46
    这里用servlet简单介绍一下java打印报表 1.无合并行/列 package weaver.xhyy.servlet; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; ...

    这里用servlet简单介绍一下java打印报表

    1.无合并行/列

    package weaver.xhyy.servlet;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.net.URLEncoder;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import jxl.Workbook;
    import jxl.format.Border;
    import jxl.format.BorderLineStyle;
    import jxl.format.Colour;
    import jxl.write.Label;
    import jxl.write.WritableCellFormat;
    import jxl.write.WritableFont;
    import jxl.write.WritableSheet;
    import jxl.write.WritableWorkbook;
    
    import weaver.general.BaseBean;
    import weaver.general.Util;
    import weaver.hrm.HrmUserVarify;
    import weaver.hrm.User;
    import weaver.xhyy.sap.SearchYhdzxx;
    
    /**
     * 打印银行对账信息
     * 
     * @author Yuk
     * 
     */
    public class GetYhdzxxExcelServlet extends HttpServlet {
        protected void service(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
    
            BaseBean log = new BaseBean();
            log.writeLog("开始导出院外来款查询");
            User user = HrmUserVarify.getUser (request , response) ;
            String beginDate = Util.null2String(request.getSession().getAttribute("beginDate"));
            String endDate = Util.null2String(request.getSession().getAttribute("endDate"));
    
            Map<String, String> otherparams = new HashMap<String, String>();
            otherparams.put("beginDate", beginDate);
            otherparams.put("endDate", endDate);
            // 调用【获取银行对账信息】
            SearchYhdzxx search = new SearchYhdzxx();
            List<Map<String, String>> list = search.getYhdzxx(user, otherparams, request, response);
    
    
            request.setCharacterEncoding("utf-8");
            response.setContentType("application/vnd.ms-excel;charset=utf-8");
    
            String context = "院外来款查询";
    
            response.setHeader("Content-Disposition", "attachment; filename=\""
                    + URLEncoder.encode(context, "utf-8") + ".xls\"");
    
            // 新建EXCEL文件
            File downloadFile = new File(request.getSession().getServletContext()
                    .getRealPath("/"), URLEncoder.encode(context, "utf-8") + ".xls");
    
            if (downloadFile.exists()) {
                downloadFile.delete();
            }
    
            downloadFile.createNewFile();
            OutputStream os = new FileOutputStream(downloadFile);
    
            try {
                // 打开文件
                WritableWorkbook book = Workbook.createWorkbook(os);
                // 生成名为"第一页"的工作表,参数0表示这是第一
                WritableSheet sheet = book.createSheet(context,0);
                /*
                 * sheet.setColumnView(1, 20);//设置列宽 sheet.setColumnView(2, 20);
                 * sheet.setColumnView(3, 20); sheet.setColumnView(4, 15);
                 */
    
                /**
                 * 设置表格表头样式
                 */
                WritableFont font1 = new WritableFont(
                        WritableFont.createFont("宋体"), 10, WritableFont.BOLD);
                font1.setColour(Colour.BLACK);// 表格字体颜色
                WritableCellFormat format1 = new WritableCellFormat(font1);
                format1.setBackground(Colour.GREEN);// 表格背景颜色
                format1.setBorder(Border.ALL, BorderLineStyle.THIN);// 表格线条加黑
                format1.setAlignment(jxl.format.Alignment.CENTRE);// 左右居中
                format1.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE);// 上下居中
                format1.setWrap(true);// 单元格的文字按照单元格的列宽来自动换行显示
    
                /**
                 * 设置表格内容样式
                 */
                // 设置字体为宋体,16号字,加粗,颜色为黑色
                WritableFont font2 = new WritableFont(
                        WritableFont.createFont("宋体"), 10, WritableFont.BOLD);
                font2.setColour(Colour.BLACK);// 表格字体颜色
                WritableCellFormat format2 = new WritableCellFormat(font2);
                format2.setBackground(Colour.GRAY_25);// 表格背景颜色
                format2.setBorder(Border.ALL, BorderLineStyle.THIN);// 表格线条加黑
                format2.setAlignment(jxl.format.Alignment.CENTRE);// 左右居中
                format2.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE);// 上下居中
                format2.setWrap(true);// 单元格的文字按照单元格的列宽来自动换行显示
    
                /**
                 * 步骤: 1.创建表格--建立标签,参数依次为:列索引、行索引、内容、格式 Label labelA = new Label(0,
                 * 0, "姓名", format1) 2.将定义好的单元格添加到工作表中 sheet.addCell(labelA); 3.把
                 * 单元格(column, row)到单元格(column1,row1)进行合并,没有合并可不用写
                 * 如将第一列的第一行与第第一列的第二行合并 sheet.mergeCells(0, 0, 0, 1);
                 */
    
                /**
                 * 添加表格表头
                 */
                // 1.人员信息
                Label labelA = new Label(0, 0, "年度", format1);
                Label labelB = new Label(1, 0, "结算方式", format1);
                Label labelC = new Label(2, 0, "结算号", format1);
                Label labelD = new Label(3, 0, "金额", format1);
                Label labelE = new Label(4, 0, "类别", format1);
                Label labelF = new Label(5, 0, "附言", format1);
                Label labelG = new Label(6, 0, "交易日", format1); 
                Label labelH = new Label(7, 0, "对方户名", format1);
                sheet.addCell(labelA);
                sheet.addCell(labelB);
                sheet.addCell(labelC);
                sheet.addCell(labelD);
                sheet.addCell(labelE);
                sheet.addCell(labelF);
                sheet.addCell(labelG);
                sheet.addCell(labelH);
                sheet.setColumnView(3, 15);
                sheet.setColumnView(5, 15);
                sheet.setColumnView(6, 15);
                sheet.setColumnView(7, 40);
    
                /**
                 * 添加表格内容
                 */
                for(int i=0;i<list.size();i++){
                    Map<String, String> map = list.get(i);
                    labelA = new Label(0, i+1, map.get("kjnd"), format2);
                    labelB = new Label(1, i+1, map.get("jsfs"), format2);
                    labelC = new Label(2, i+1, map.get("jysdh"), format2);
                    labelD = new Label(3, i+1, map.get("jyje"), format2);
                    labelE = new Label(4, i+1, map.get("bz"), format2);
                    labelF = new Label(5, i+1, map.get("fy"), format2);
                    labelG = new Label(6, i+1, map.get("jyrq"), format2); 
                    labelH = new Label(7, i+1, map.get("zy"), format2);
                    sheet.addCell(labelA);
                    sheet.addCell(labelB);
                    sheet.addCell(labelC);
                    sheet.addCell(labelD);
                    sheet.addCell(labelE);
                    sheet.addCell(labelF);
                    sheet.addCell(labelG);
                    sheet.addCell(labelH);
                }
                book.write();
                book.close();
            } catch (Exception e) {
                log.writeLog("导出院外来款查询报错:" + e.getMessage());
            }
            os.close();
            // 传送文件流
            InputStream is = null;
            is = new FileInputStream(downloadFile);
    
            byte[] buf = new byte[4096];
            /* 创建输出流 */
            ServletOutputStream servletOS = response.getOutputStream();
            int readLength;
            while (((readLength = is.read(buf)) != -1)) {
                servletOS.write(buf, 0, readLength);
            }
            is.close();
            servletOS.flush();
            servletOS.close();
        }
    }
    

    这里写图片描述

    2.有合并行/列

    package weaver.zbyh.servlet;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.net.URLEncoder;
    import java.text.SimpleDateFormat;
    import java.util.Calendar;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import jxl.Workbook;
    import jxl.format.Border;
    import jxl.format.BorderLineStyle;
    import jxl.format.Colour;
    import jxl.write.Label;
    import jxl.write.WritableCellFormat;
    import jxl.write.WritableFont;
    import jxl.write.WritableSheet;
    import jxl.write.WritableWorkbook;
    
    import weaver.conn.RecordSet;
    import weaver.general.BaseBean;
    import weaver.zbyh.entity.DayCheckEntity;
    
    
    /**
     * 日考勤报表导出
     * 
     * @author Yuk
     * 
     */
    public class DownLoadDayCheckServlet extends HttpServlet {
        protected void service(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            RecordSet rs = new RecordSet();
            BaseBean log = new BaseBean();
            log.writeLog("开始--导出日考勤报表");
            request.setCharacterEncoding("utf-8");
            response.setContentType("application/vnd.ms-excel;charset=utf-8");
    
            Calendar current = (Calendar) request.getSession().getAttribute("current");
            int day = current.get(Calendar.DAY_OF_MONTH);// 今天是几号
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            current.set(Calendar.DATE, 1);
            String firstDay = sdf.format(current.getTime());// 本月1号的日期
            current.set(Calendar.DAY_OF_MONTH, day);
            String presentDay = sdf.format(current.getTime());// 系统当前日期
            String context = "每日统计表-统计日期" + firstDay + "至" + presentDay;
    
            response.setHeader("Content-Disposition", "attachment; filename=\""
                    + URLEncoder.encode(context, "utf-8") + ".xls\"");
    
            // 新建EXCEL文件
            File downloadFile = new File(request.getSession().getServletContext()
                    .getRealPath("/"), URLEncoder.encode(context, "utf-8") + ".xls");
    
            if (downloadFile.exists()) {
                downloadFile.delete();
            }
    
            downloadFile.createNewFile();
            OutputStream os = new FileOutputStream(downloadFile);
            try {
                // 打开文件
                WritableWorkbook book = Workbook.createWorkbook(os);
                // 生成名为"第一页"的工作表,参数0表示这是第一
                WritableSheet sheet = book.createSheet(firstDay + "-" + presentDay,
                        0);
                /*
                 * sheet.setColumnView(1, 20);//设置列宽 sheet.setColumnView(2, 20);
                 * sheet.setColumnView(3, 20); sheet.setColumnView(4, 15);
                 */
    
                /**
                 * 设置表格表头样式
                 */
                WritableFont font1 = new WritableFont(
                        WritableFont.createFont("宋体"), 10, WritableFont.BOLD);
                font1.setColour(Colour.BLACK);// 表格字体颜色
                WritableCellFormat format1 = new WritableCellFormat(font1);
                format1.setBackground(Colour.GREEN);// 表格背景颜色
                format1.setBorder(Border.ALL, BorderLineStyle.THIN);// 表格线条加黑
                format1.setAlignment(jxl.format.Alignment.CENTRE);// 左右居中
                format1.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE);// 上下居中
                format1.setWrap(true);// 单元格的文字按照单元格的列宽来自动换行显示
    
                /**
                 * 设置表格内容样式
                 */
                // 设置字体为宋体,16号字,加粗,颜色为黑色
                WritableFont font2 = new WritableFont(
                        WritableFont.createFont("宋体"), 10, WritableFont.BOLD);
                font2.setColour(Colour.BLACK);// 表格字体颜色
                WritableCellFormat format2 = new WritableCellFormat(font2);
                format2.setBackground(Colour.GRAY_25);// 表格背景颜色
                format2.setBorder(Border.ALL, BorderLineStyle.THIN);// 表格线条加黑
                format2.setAlignment(jxl.format.Alignment.CENTRE);// 左右居中
                format2.setVerticalAlignment(jxl.format.VerticalAlignment.CENTRE);// 上下居中
                format2.setWrap(true);// 单元格的文字按照单元格的列宽来自动换行显示
    
                /**
                 * 步骤: 1.创建表格--建立标签,参数依次为:列索引、行索引、内容、格式 Label labelA = new Label(0,
                 * 0, "姓名", format1) 2.将定义好的单元格添加到工作表中 sheet.addCell(labelA); 3.把
                 * 单元格(column, row)到单元格(column1,row1)进行合并,没有合并可不用写
                 * 如将第一列的第一行与第第一列的第二行合并 sheet.mergeCells(0, 0, 0, 1);
                 */
    
                /**
                 * 添加表格表头
                 */
                // 1.人员信息
                Label labelA = new Label(0, 0, "姓名", format1);
                Label labelB = new Label(1, 0, "部门", format1);
                Label labelC = new Label(2, 0, "工号", format1);
                Label labelD = new Label(3, 0, "日期", format1);
                Label labelE = new Label(4, 0, "上班打卡时间", format1);
                Label labelF = new Label(5, 0, "下班打卡时间", format1);
                sheet.addCell(labelA);
                sheet.mergeCells(0, 0, 0, 1);
                sheet.addCell(labelB);
                sheet.mergeCells(1, 0, 1, 1);
                sheet.addCell(labelC);
                sheet.mergeCells(2, 0, 2, 1);
                sheet.addCell(labelD);
                sheet.mergeCells(3, 0, 3, 1);
                sheet.addCell(labelE);
                sheet.mergeCells(4, 0, 4, 1);
                sheet.addCell(labelF);
                sheet.mergeCells(5, 0, 5, 1);
                // 2.请假(天)
                Label labelG = new Label(6, 0, "请假(天)", format1);
                sheet.addCell(labelG);
                sheet.mergeCells(6, 0, 19, 0);
                // 3.流程信息
                String[] leaveArr = { "迟到", "早退", "年休假", "事假", "病假", "婚假", "丧假",
                        "产假", "护理假", "哺乳假", "出差", "外出", "补打卡", "旷工" };
                for (int i = 0; i < leaveArr.length; i++) {
                    Label label = new Label(i + 6, 1, leaveArr[i], format1);
                    sheet.addCell(label);
                }
    
                /**
                 * 获取考勤信息,作为表格内容
                 */
                // 获取session中的考勤对象
                List<DayCheckEntity> dce = (List<DayCheckEntity>) request.getSession().getAttribute("DayCheckList");
    
                /**
                 * 添加表格内容
                 */
                for (int i = 0; i < dce.size(); i++) {
                    DayCheckEntity obj = dce.get(i);
                    String[] ObjectArr = { obj.getXm(), obj.getBm(), obj.getGh(),
                            obj.getRq() + "", obj.getSbdksj() + "",
                            obj.getXbdksj() + "", obj.getCd() + "",
                            obj.getZt() + "", obj.getNxj() + "", obj.getSj() + "",
                            obj.getBj() + "", obj.getHj() + "", obj.getSj2() + "",
                            obj.getCj() + "", obj.getHlj() + "", obj.getBrj() + "",
                            obj.getCc() + "", obj.getWc() + "", +obj.getBdk() + "",
                            obj.getKg()+ "" };
                    // 循环添加人员、请假与其他流程的信息(固定列)
                    for (int j = 0; j < ObjectArr.length; j++) {
                        if(j<=7){
                            // 文本类型单元格
                            Label label = new Label(j, 2 + i, ObjectArr[j], format2);
                            sheet.addCell(label);
                        }else{
                            // 数字类型单元格
                            jxl.write.Number label = new jxl.write.Number(j, 2 + i,
                                    Double.valueOf(ObjectArr[j]), format2);
                            sheet.addCell(label);
                        }
                    }
    
                }
    
                book.write();
                book.close();
            } catch (Exception e) {
                log.writeLog("导出日考勤报表报错:" + e.getMessage());
            }
            os.close();
    
            // 传送文件流
            InputStream is = null;
            is = new FileInputStream(downloadFile);
    
            byte[] buf = new byte[4096];
            /* 创建输出流 */
            ServletOutputStream servletOS = response.getOutputStream();
            int readLength;
            while (((readLength = is.read(buf)) != -1)) {
                servletOS.write(buf, 0, readLength);
            }
            is.close();
            servletOS.flush();
            servletOS.close();
        }
    }
    

    这里写图片描述

    展开全文
  • 以及记录一下在vue里面如何让浏览器弹出打印打印这个表格table(一个在git上发现的好用的打印插件,不用install进项目,直接存一个js文件就能用,简单好用的vue打印插件)。下面代码粘贴出来另存为html文件就能...

    想写一个很普通的那种像word文档样式的table,发现网上很多都是什么教程,没有合适的,我只想要一个拿来就能用的html的table(非专业前端),没有什么别的依赖,而且样式要很普通的简单的表格。既然没有合适的,那我分享一个吧。以及记录一下在vue里面如何让浏览器弹出打印框打印这个表格table(一个在git上发现的好用的打印插件,不用install进项目,直接存一个js文件就能用,简单好用的vue打印插件)

    下面代码粘贴出来另存为html文件就能直接用,没有别的依赖,先看效果图
    在这里插入图片描述

    html的table

    <html>
    <body>
      <div>
    
        <div style="margin:0 auto;">
          <div style="text-align:center;margin-top:20px;">个人简历</div>
      <table class="table table-striped table-bordered" align="center" valign="center">
        <tr>
          <td class="column" colspan="6">基本信息</td>
    
        </tr>
        <tr>
          <td class="column">姓名</td>
          <td  class="value"></td>
          <td class="column">性别</td>
          <td class="value"></td>
          <td class="column">出生年月</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">民族</td>
          <td class="value"></td>
          <td class="column">婚否</td>
          <td class="value"></td>
          <td class="column">政治面貌</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">籍贯</td>
          <td class="value"></td>
          <td class="column">学历</td>
          <td class="value"></td>
          <td class="column">现所在地</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">毕业院校</td>
          <td class="value" colspan="3"></td>
          <td class="column">所在专业</td>
          <td class="value" ></td>
    
        </tr>
        <tr>
          <td class="column">电子邮箱</td>
          <td class="value" colspan="3"></td>
          <td class="column">手机号码</td>
          <td class="value" ></td>
    
        </tr>
        <tr>
          <td class="column" colspan="6">教育经历</td>
        </tr>
        <tr>
          <td class="value" colspan="2">起止时间</td>
          <td class="value" colspan="2">毕业院校/教育机构</td>
          <td class="value" colspan="2">专业/课程</td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
         <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
    
        <tr>
          <td class="column" colspan="6">工作经历</td>
        </tr>
        <tr>
          <td class="value" colspan="2">起止时间</td>
          <td class="value" colspan="2">公司名称</td>
          <td class="value" colspan="2">职位</td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
         <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
    
        <tr>
          <td class="column">爱好</td>
          <td class="value" colspan="5"></td>
        </tr>
        <tr >
          <td class="column" >技能</td>
          <td class="value" colspan="5" style="text-align:left;">
            <br>
            <br>
            <br>
            <br>
          </td>
        </tr>
        <tr>
          <td class="column">自我评价</td>
          <td class="value" colspan="5">
            <br>
            <br>
            <br>
            <br>
          </td>
        </tr>
    
    
    <!--    <tr>
          <td class="column">成本会计审核</td>
          <td class="value" colspan="5" style="text-align:left;">
            通过。<br>
            附件名称:xxx.pdf<br>
            报废金额:2000元。其他审核意见。<br>
            <div style="text-align:right;">签批人:小明   2019/09/24</div>
          </td>
        </tr>
    -->
    
      </table>
        </div>
      </div>
    </body>
    </html>
    <script>
      
     
    </script>
    
    <style>
      .table{
        border-collapse: collapse;
        border-spacing: 0;
        background-color: transparent;
        display: table;
        width: 100%;
        max-width: 100%;
        width: 800px;
        margin:0 auto;
      }
      .table td{
        text-align:center;
        vertical-align:middle;
        font-size: 14px;
        font-family: 'Arial Normal', 'Arial';
        color: #333333;
        padding: 8px 12px;
      }
      .table-bordered {
        border: 1px solid #ddd;
      }
      *{
        margin: 0px;
        padding: 0px;
      }
      .column{
        width:30px;
        height:30px;
        border:1px solid #333;
        background: #f1f1f1;
      }
      .value{
        width:70px;
        height:30px;
        border:1px solid #333;
      }
    
    
    </style>
    
    

    一、我的项目是vue项目,所以先把上面的html代码转成vue的页面

    <template>
      <div ref="print">
    
        <div style="margin:0 auto;">
            <div style="text-align:center;margin-top:10px;">个人简历</div>
      <table class="table table-striped table-bordered" align="center" valign="center">
        <tr>
          <td class="column" colspan="6">基本信息</td>
    
        </tr>
        <tr>
          <td class="column">姓名</td>
          <td  class="value"></td>
          <td class="column">性别</td>
          <td class="value"></td>
          <td class="column">出生年月</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">民族</td>
          <td class="value"></td>
          <td class="column">婚否</td>
          <td class="value"></td>
          <td class="column">政治面貌</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">籍贯</td>
          <td class="value"></td>
          <td class="column">学历</td>
          <td class="value"></td>
          <td class="column">现所在地</td>
          <td class="value"></td>
        </tr>
        <tr>
          <td class="column">毕业院校</td>
          <td class="value" colspan="3"></td>
          <td class="column">所在专业</td>
          <td class="value" ></td>
    
        </tr>
        <tr>
          <td class="column">电子邮箱</td>
          <td class="value" colspan="3"></td>
          <td class="column">手机号码</td>
          <td class="value" ></td>
    
        </tr>
        <tr>
          <td class="column" colspan="6">教育经历</td>
        </tr>
        <tr>
          <td class="value" colspan="2">起止时间</td>
          <td class="value" colspan="2">毕业院校/教育机构</td>
          <td class="value" colspan="2">专业/课程</td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
         <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
    
        <tr>
          <td class="column" colspan="6">工作经历</td>
        </tr>
        <tr>
          <td class="value" colspan="2">起止时间</td>
          <td class="value" colspan="2">公司名称</td>
          <td class="value" colspan="2">职位</td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
        <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
         <tr>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
          <td class="value" colspan="2"></td>
        </tr>
    
        <tr>
          <td class="column">爱好</td>
          <td class="value" colspan="5"></td>
        </tr>
        <tr >
          <td class="column" >技能</td>
          <td class="value" colspan="5" style="text-align:left;">
            <br>
            <br>
            <br>
            <br>
          </td>
        </tr>
        <tr>
          <td class="column">自我评价</td>
          <td class="value" colspan="5">
            <br>
            <br>
            <br>
            <br>
          </td>
        </tr>
    
    
      </table>
        </div>
      </div>
    </template>
    <script>
    
      export default {
    
        data() {
          return {
          };
        },
        props: [''],
        watch:{
        },
        computed: {
        },
        created() {
    
        },
        mounted() {
               setTimeout( ()=>{
                  //延迟0.5秒弹出打印
                  //不延迟可能document还没有更新,因为数据会从后端读取出来没那么快渲染到页面
                  this.$print(this.$refs.print)
                }, 500)
    
        },
      }
    </script>
    
    <style lang="less">
      .table{
        border-collapse: collapse;
        border-spacing: 0;
        background-color: transparent;
        display: table;
        width: 100%;
        max-width: 100%;
        width: 800px;
        margin:0 auto;
      }
      .table td{
        text-align:center;
        vertical-align:middle;
        font-size: 14px;
        font-family: 'Arial Normal', 'Arial';
        color: #333333;
        padding: 8px 12px;
      }
      .table-bordered {
        border: 1px solid #ddd;
      }
      *{
        margin: 0px;
        padding: 0px;
      }
      .column{
        width:30px;
        height:30px;
        border:1px solid #333;
        background: #f1f1f1;
      }
      .value{
        width:70px;
        height:30px;
        border:1px solid #333;
      }
    
    
    </style>
    
    

    二、把下面的代码另存为一个print.js文件,在main.js文件里面引入这个print.js

    //在main.js引入下面的print.js文件
    import Print from '@/common/print'
    
    // 打印类属性、方法定义
    /* eslint-disable */
    const Print = function (dom, options) {
      if (!(this instanceof Print)) return new Print(dom, options);
    
      this.options = this.extend({
        'noPrint': '.no-print'
      }, options);
    
      if ((typeof dom) === "string") {
        this.dom = document.querySelector(dom);
      } else {
        this.isDOM(dom)
        this.dom = this.isDOM(dom) ? dom : dom.$el;
      }
    
      this.init();
    };
    Print.prototype = {
      init: function () {
        var content = this.getStyle() + this.getHtml();
        this.writeIframe(content);
      },
      extend: function (obj, obj2) {
        for (var k in obj2) {
          obj[k] = obj2[k];
        }
        return obj;
      },
    
      getStyle: function () {
        var str = "",
          styles = document.querySelectorAll('style,link');
        for (var i = 0; i < styles.length; i++) {
          str += styles[i].outerHTML;
        }
        str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    
        return str;
      },
    
      getHtml: function () {
        var inputs = document.querySelectorAll('input');
        var textareas = document.querySelectorAll('textarea');
        var selects = document.querySelectorAll('select');
    
        for (var k = 0; k < inputs.length; k++) {
          if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
            if (inputs[k].checked == true) {
              inputs[k].setAttribute('checked', "checked")
            } else {
              inputs[k].removeAttribute('checked')
            }
          } else if (inputs[k].type == "text") {
            inputs[k].setAttribute('value', inputs[k].value)
          } else {
            inputs[k].setAttribute('value', inputs[k].value)
          }
        }
    
        for (var k2 = 0; k2 < textareas.length; k2++) {
          if (textareas[k2].type == 'textarea') {
            textareas[k2].innerHTML = textareas[k2].value
          }
        }
    
        for (var k3 = 0; k3 < selects.length; k3++) {
          if (selects[k3].type == 'select-one') {
            var child = selects[k3].children;
            for (var i in child) {
              if (child[i].tagName == 'OPTION') {
                if (child[i].selected == true) {
                  child[i].setAttribute('selected', "selected")
                } else {
                  child[i].removeAttribute('selected')
                }
              }
            }
          }
        }
    
        return this.dom.outerHTML;
      },
    
      writeIframe: function (content) {
        var w, doc, iframe = document.createElement('iframe'),
          f = document.body.appendChild(iframe);
        iframe.id = "myIframe";
        //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
        iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
        w = f.contentWindow || f.contentDocument;
        doc = f.contentDocument || f.contentWindow.document;
        doc.open();
        doc.write(content);
        doc.close();
        var _this = this
        iframe.onload = function(){
          _this.toPrint(w);
          setTimeout(function () {
            document.body.removeChild(iframe)
          }, 100)
        }
      },
    
      toPrint: function (frameWindow) {
        try {
          setTimeout(function () {
            frameWindow.focus();
            try {
              if (!frameWindow.document.execCommand('print', false, null)) {
                frameWindow.print();
              }
            } catch (e) {
              frameWindow.print();
            }
            frameWindow.close();
          }, 10);
        } catch (err) {
          console.log('err', err);
        }
      },
      isDOM: (typeof HTMLElement === 'object') ?
        function (obj) {
          return obj instanceof HTMLElement;
        } :
        function (obj) {
          return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
        }
    };
    const MyPlugin = {}
    MyPlugin.install = function (Vue, options) {
      // 4. 添加实例方法
      Vue.prototype.$print = Print
    }
    export default MyPlugin
    
    

    三、在需要打印的页面div上加 ref=“print”

    在这里插入图片描述

    四、在需要打印的按钮加上 this. p r i n t ( t h i s . print(this. print(this.refs.print)即可点击弹出打印框

    (我这里是在加载表格完成后就弹出打印框,无需点击按钮,代码如下)

       mounted() {
              //用$nextTick等页面加载完才执行this.$print(),不然document可能还没有更新
               this.$nextTick(() => {
                   this.$print(this.$refs.print);
               }
    
    
        },
    

    五、刷新页面就可以看到浏览器弹出打印框了

    在这里插入图片描述

    注:
    有没有发现没有背景颜色?或者打印的表格没有完整显示出来?如下操作就解决了
    在这里插入图片描述


    感谢大佬的分享,vue打印插件的源码:

    vue打印插件 使用方法

    展开全文
  • displayName:'货位描述'}, {field: 'EQType',displayName:'操作设备类型'}, {field: 'CDT',displayName:'操作时间'}, {field: 'UserName',displayName:'操作人'} ], type: 'json', header:'查询入库流水' });

    引用print.js

    下载地址
    放到main.js里面

    import * as print from './extension/plugs/print';
    Vue.use(print);
    Vue.prototype.$print = print;
    

    组件引用:

    printJS({
                  printable:this.$refs.table.rowData,
                  properties: [
                    {field:'BillInboundID', displayName:'入库单号'},
                    {field: 'BillInboundDetailPID',displayName:'单据明细号'},
                    {field: 'MatCode',displayName:'物料编码'},
                    {field: 'MatDescription',displayName:'物料名称'},
                    {field: 'BatchNO',displayName:'批次'},
                    {field: 'UnitBase',displayName:'基本包装单位'},
                    {field: 'PalletID',displayName:'托盘码'},
                    {field: 'PackageCodeDes',displayName:'包装编码'},
                    {field: 'quantity',displayName:'数量'},
                    {field: 'sumQuantityBefore',displayName:'操作前库存'},
                    {field: 'sumQuantityAfter',displayName:'操作后库存'},
                    {field: 'DescriptionOfPos',displayName:'货位描述'},
                    {field: 'EQType',displayName:'操作设备类型'},
                    {field: 'CDT',displayName:'操作时间'},
                    {field: 'UserName',displayName:'操作人'}
                  ],
                  type: 'json',
                  header:'查询入库流水'
                });
    
    展开全文
  • Qt打印数据库中的表格

    千次阅读 2020-06-03 11:58:56
    连接数据库,用QTableModel显示数据库的表格,然后将表格转为html,然后再进行打印打印的方法是参考以下链接完成的: Qt中(HTML)实现数据表格打印功能 输出 主界面 打印结果 代码 qprintermanager.h #ifndef ...
  • 目录 网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: ...打印9*9乘法表 JS中的函数(相当...
  • 本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下 效果如图: html:后面的日期是循环出来的 <span class=calendar-left click=lastDateclick>< 近期事件 ...
  • LODOP中打印项的宽高也可以用百分比,如果内容再是百分比,那就是相对于纸张的,可实现纸张不同,都能满页打印的效果,但是随着纸张不同,内容在表格中的宽度高度变化,经常会导致变形。 表现为不同纸张效果不同,...
  • 一、table设置了colspan属性,但打印时依旧宽度自适应的问题 问题描述: 上图: 页面上显示的: 打印预览显示的: 很明显,打印时根据宽度自己撑开了单元格,并且把长度较小的挤扁了 ...时间</td> ...
  • 采用js打印页面,表格过长 会出现分页,表格就会被裁减(那种每行固定就一行展示的简单,每个分页给他多少条数据就完事了),这里的问题是数据从后台获取,而且每一列都可能出现换行,多的可能达到10几20行的。...
  • angular2 表格打印 -essence-ng2-print插件

    千次阅读 2019-02-18 10:41:31
    [popTitle]="'表格打印'" [btnText]="'打印表格'" [btnClass]="{'btn': true, 'btn-info': true}" [printHTML]="print" [printCSS]="printCSS" 除了必要的属性之外,我不需要控制打印按钮的显隐,我...
  • layui 表格时间格式化去掉T

    千次阅读 2019-08-29 09:44:41
    { field: 'arriveDate', title: '降落时间', align: 'center', templet : "<div>{{layui.util.toDateString(d.departureDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
  • 小甲鱼零基础入门学习python笔记

    万次阅读 多人点赞 2019-08-14 11:06:30
    ' 原始字符串 •好像反斜杠是一个好东西,但不妨试试打印: >>> str = 'C:\now' •我们可以用反斜杠对自身进行转义: >>> str = 'C:\\now' •原始字符串的使用非常简单,只需要在字符串前边加一个英文字母r即可(则...
  • C#表格table时间显示年月日时分秒格式设置 作者:张国军_Suger 开发工具与关键技术:Visual Studio 2015、C#、.NET &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;在做...
  • time = xlrd.xldate_as_tuple(excel_table.cell(row_start + k, day_time_col).value, 0)
  • [实用]【更新中】Java Apache POI 打印Word文档工具(含文本替换,动态表格功能)基于Apache POI对Word进行操作一、基于Apache POI封装的word文档工具V1.0介绍二、Apache POI 知识1. jar包(maven的,这个不多做解释...
  • 柯维博士介绍的第四代时间管理表格
  • “7:50”这样的时间形式,读取之后打印出来却是“0.326388888889”浮点数形式, 我想按照“7:50”这样的形式输出,不知道要如何处理,希望懂这个方面的大神帮帮忙! C币就这么多了,先谢谢解答的人!
  • java 实现动态表格

    热门讨论 2011-09-23 16:24:23
    动态表格 java动态表格实现方法 很有用得 我找了很长时间
  • 为您提供vxe-tablevue表格解决方案下载,vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
  • 如何使用 Python 输出漂亮的表格

    千次阅读 2020-03-11 11:40:00
    点击上方“编程派”,选择设为“设为星标”优质文章,第一时间送达!原文链接:https://linuxops.org/blog/python/prettytable.html1. 前言 最...
  • 舒尔特表格VBA版

    2018-12-10 13:41:41
    舒尔特VBA简单程序,可以自动生成,记录时间
  • 本人连续学习fpSPR80超强表格一段时间,为节约大家学习此表格时间,本人在前人的基础上,自己将已经学习到的功能做成示例,供易友们参考。也许有不正确之处,望易友们斧正。 已经实现的功能如下: 1、列排序 2、...
  • vue打印数据,可分页打印

    千次阅读 2019-07-05 11:33:19
    使用的是vue-easy-print 打印插件 可以支持分页打印。 转载https://download.csdn.net/download/qq_36845014/10807027?utm_source=bbsseo 在开发是 想要打印功能 但是打印数据不想显示出来 在打印的时候要打印初数据...
  • 3d打印机gcode代码命令解析 - 表格,RepRapG代码字段:介绍了首字母的定义。 定义的数字nnn代表。 数字可以是整数,也可以包含一个小数点,根据上下文。
  • 如何实现BootStrapTable的动态表格

    千次阅读 2020-05-28 09:49:23
    BootStrapTable的动态表格 在我们构建BootStrapTable(下文中均称:BsTable),其中columns参数作为表格列的内容存储,我们的需求是根据返回的数据动态的生成columns参数的内容。从而生成动态表格。 columns参数格式:...
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    写出函数DateDemo的返回结果,系统时间假定为今天 68 写出程序运行的结果? 69 阅读以下代码,请分析出结果: 69 补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗? 69 写出简单描述html标签...
  • 测试开发笔记

    万次阅读 多人点赞 2019-11-14 17:11:58
    回归测试充分,覆盖面广,不容遗漏 工作量大,时间长,成本高 时间充裕且测试资源较充分时,第一次和最后一次做回归测试的时候用这种方法 选择性回归 覆盖修改法 每次回归测试时只执行发现错误的用例 时间最短,成本...
  • #region 打印 //打印函数 private void printInfo() { try { GridControl gc = gridControl1; //绑定表格组件 GridView gv = gridView...
  • 本人连续学习fpSPR80超强表格一段时间,为节约大家学习此表格时间,本人在前人的基础上,自己将已经学习到的功能做成示例,供易友们参考。也许有不正确之处,望易友们斧正。已经实现的功能如下:1、列排序2、打印...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,455
精华内容 27,782
关键字:

怎么打印时间表格