精华内容
下载资源
问答
  • vue打印表格

    2021-02-20 19:16:55
    1、npm 下载 npm install print-js 2、在需要的页面使用 import printJS from ‘print-js’ 3、写一个按钮 <!...el-button type="primary" icon="el-icon-printer...printTable(){//打印表格 //通过getdata调用后

    1、npm 下载 npm install print-js

    2、在需要的页面使用

    import printJS from ‘print-js’

    在这里插入图片描述

    3、写一个按钮

    <!-- 点击按钮进行打印 -->
    <el-button type="primary" icon="el-icon-printer" @click="printTable">
        打印
    </el-button>
    

    4、打印表格的方法

    printTable(){//打印表格
    	 //通过getdata调用后台接口获取全部数据封装到res
    	 axios({
    	     url:'/apis/cost/getData',
    	     methods: "GET",
    	     params:{
    	         "tId":this.tId
    	     }
    	 }).then(response => {
    	     const res = response.data;
    	     let data = [];
    	     for(let i = 0; i<res.length; i++){
    	         data.push({
    	             field1:i+1,
    	             field2:res[i].comment,
    	             field3:res[i].designator,
    	             field4:res[i].footprint,
    	             field5:res[i].quantity,
    	             field6:res[i].inventoryCount,
    	             field7:res[i].cUnit,
    	             field8:res[i].cTotal
    	         })
    	     }
    	     console.log("data=",data);
    	     printJS({
    	         printable:data,
    	         properties:[{
    	             field:'field1',
    	             displayName:'序号',
    	             columnSize:1
    	         },{
    	             field:'field2',
    	             displayName:'物料名称',
    	             columnSize:1
    	         },{
    	             field:'field3',
    	             displayName:'方位',
    	             columnSize:1
    	         },{
    	             field:'field4',
    	             displayName:'覆盖范围',
    	             columnSize:1
    	         },{
    	             field:'field5',
    	             displayName:'数量',
    	             columnSize:1
    	         },{
    	             field:'field6',
    	             displayName:'库存数量',
    	             columnSize:1
    	         },{
    	             field:'field7',
    	             displayName:'单价/元',
    	             columnSize:1
    	         },{
    	             field:'field8',
    	             displayName:'合计/元',
    	             columnSize:1
    	         }],
    	         type:'json',
    	         header:'C001',
    	         //样式设置
    	         gridStyle:'border:2px solid #3971A5;',
    	         gridHeaderStyle:'color:red; border:2px solid #3971A5;'
    	     })
    	
    	 }).catch(function (error) { // 请求失败处理
    	     console.log(error);
    	 });
    }
    

    5、效果图:

    在这里插入图片描述

    展开全文
  • vue 打印表格需求

    2021-07-09 20:01:28
    最近,项目中用到打印表格的需求,在网上找了好些都不太行,不是样式缺少,就是内容缺少,基本思路还是调用window自带的print功能。 我用el-ui自带的表格,打印的时候样式内容都有一定的缺少,能成功的小伙伴们分享...
    1. 最近,项目中用到打印表格的需求,在网上找了好些都不太行,不是样式缺少,就是内容缺少,基本思路还是调用window自带的print功能。
      我用el-ui自带的表格,打印的时候样式内容都有一定的缺少,能成功的小伙伴们分享下,下面是我用原生写的实现了。
    2. 表格如下在这里插入图片描述
    <template>
      <div :id="`printJS-html`">
        <table cellpadding="0" cellspacing="0" style="width: 1260px">
          <tr>   // 这里是表头
            <th>考评项目</th>
            <th>考评内容</th>
            <th>分值</th>
            <th>考评标准</th>
          </tr>
           // 下面双循环拿数据渲染
          <template v-for="(item, index) in groupListTableJD">
            <tr>
            // 第一列都是考评项目
              <td v-if="index == 0" :rowspan="groupListTableJD.length" >
                {{ groupListTableJD[0].type_name }}
              </td>
              <td>{{ item.norm_name }}</td>
              <td>{{ item.norm_score }}</td>
              // 按需
              <div 
                v-for="(curr, ix) in item.deduction"
                :class="['contentTableCell']"
              >
                {{ curr.score_name }}
              </div>
            </tr>
          </template>
        </table>
      </div>
    </template>
    <script>
    export default {
      components: {},
      props: {
        groupListTableJD: {
          type: Object,
          default: {},
        },
      },
      data() {
        return {};
      },
      methods: {
        onPrint() {
          printJS({
            printable: `printJS-html`,
            type: "html",
            targetStyles: ["*"],
          });
        },
      },
    };
    </script>
    // 样式就不写了
    

    可以把上面这个demo作为子组件,哪里需要引入即可,groupListTableJD 为父组件传入的数据,然后在父组件中定义按钮

    <el-button
            class="back-info"
            type="danger"
            icon="el-icon-document-copy"
            @click="print"
            style="margin-bottom: 10px !important"
            >打 印</el-button
          >
     <Print ref="table" :groupListTableJD="groupListTableJD" ></Print>
     
    

    点击按钮,

    import Print from 'xxxxx' // 刚刚自定义的子组件路径
    export default {
      name: "basetable",
      components:{
        Print
      },
      data(){
      	return{
      		groupListTableJD = [
                {
                    check_object: "部门人员",
                    check_object_id: 347,
                    deduction: [{ id: 45, score_name: "3324" }],
                    id: 66,
                    norm_name: "测试",
                    norm_score: 30,
                    title: "xxx市场监督管理局",
                    type_dic: 1,
                    type_name: "管理服务",
                },
                {
                    check_object: "部门人员",
                    check_object_id: 347,
                    deduction: [{ id: 30, score_name: "台面清洁度" }, { id: 31, score_name: "台面整洁度" }],
                    id: 67,
                    norm_name: "台面考核",
                    norm_score: 10,
                    title: "xxx市场监督管理局",
                    type_dic: 1,
                    type_name: "管理服务",
                },
                {
                    check_object: "市场人员",
                    check_object_id: 348,
                    deduction: [{ id: 32, score_name: "服装干净" }, { id: 33, score_name: "服装统一" }],
                    id: 68,
                    norm_name: "市场服装",
                    norm_score: 10,
                    title: "xxx市场监督管理局",
                    type_dic: 1,
                    type_name: "管理服务",
                },
                {
                    check_object: "市场人员",
                    check_object_id: 348,
                    deduction: [{ id: 44, score_name: "考评标准1" }],
                    id: 72,
                    norm_name: "测试测试",
                    norm_score: 50,
                    title: "xxx市场监督管理局",
                    type_dic: 1,
                    type_name: "管理服务",
                }
            ]
      	}
      }
      methods:{
      	print(){
            this.$refs.table.onPrint();
    		},
    }
    
    展开全文
  • 上图就是打印的效果,但表格的样式没有出来,在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;
        }
    
    展开全文
  • 主要介绍了vue+element实现打印页面功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 公司项目需要通过electron调用系统打印机,实现打印小票的功能。 二、分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信...
  • Vue+Element 表格打印

    千次阅读 2019-11-19 13:51:35
    这里写自定义目录标题Vue+Element 局部表格打印 Vue+Element 局部表格打印 一开始使用了print.js、Jquery.print.min.js、printArea等插件,但是我使用这些插件过程中出现表格显示不全,样式丢失等问题,可能跟我使用...

    Vue+Element 局部表格打印

    一开始使用了print.js、Jquery.print.min.js、printArea等插件,但是使用这些插件的过程中出现了表格显示不全,样式丢失等问题。网上的办法都没有根本的解决我的问题。之后我决定通过window.print 这种方式,将需要打印的表格写入到一个新的页面中来进行打印。

     //获取打印的页面内容
          var print= document.getElementById('print');
          var newContent = print.innerHTML;
          var oldContent = document.body.innerHTML;
          document.body.innerHTML = newContent;
          document.getElementsByTagName('body')[0].style.zoom=0.92;
          window.print();
          window.location.reload();
          //将原有页面还原到页面
          document.body.innerHTML = oldContent;
          return false;
    

    在使用插件和window这种方式打印的时候,还会出现表头偏移的问题。
    写入到新页面中,打印出来的效果如下:在这里插入图片描述
    通过 @page 对打印的纸张进行设置,比如:

          @page{
    			size: A4 landscape; /*portrait: 纵向打印,  landscape: 横向*/
    		}
    

    通过 @media print 对表格的样式进行修改:

          @media print {
            .el-table thead.is-group th {
                text-align: center
            }
            tbody {
                text-align: center;
                border: 1px solid #000;
            }
            th {
                border: 1px solid #000;
            }
            td {
                border: 1px solid #000;
            }
        }
    

    出来的效果是这样:在这里插入图片描述
    自己手写给表格加上了边框线,但是显示不全的问题还是没有解决。

          document.getElementsByTagName('body')[0].style.zoom=0.78;
    

    加上这行代码可以实现缩放,但是发现在不同屏幕大小的电脑上,打印的表格会出现不同偏移,单纯的通过zoom来设置并不太好。

    在@media print 中添加

            table,
            tbody,
            thead {
                width: 100% !important;
            }
    
            colgroup {
                position: absolute;
                width: 100% !important;
            }
    

    表格显示不全是宽度的问题,给了表格一个百分比宽度,解决了表格显示不全的问题,而且也没有出现表头偏移的问题。在不同的分辨率的电脑上也可以适应,打印出来的效果也比较好。效果如下:
    在这里插入图片描述本人小白一个,自己搞了好多天打印功能,网上的大部分插件,办法都试了个遍,都没有很好的解决。目前的办法也不知道是否完全适用,写的不好 多见谅!

    展开全文
  • 本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件...
  • 数据表格打印、导入、导出数据表格打印一、实现当前页面数据打印二、实现全部页面数据打印数据表格导入一、HTML代码编写二、JavaScript代码编写三、导入数据表格JS代码编写数据表格导出一、安装相应插件二、导入依赖...
  • 用到的打印工具是LODOP。 项目环境是vue-cli搭建的,组件库是...2、绘制要打印表格内容 此处不要用组件库的<a-table>去写,用原生的<table> <caption> <tr> <th> <td>等标签去
  • 如何编写表格添加删除实例步骤攻略下载
  • vue打印数据,可分页打印

    千次阅读 2019-07-05 11:33:19
    使用的是vue-easy-print 打印插件 可以支持分页打印。 转载https://download.csdn.net/download/qq_36845014/10807027?utm_source=bbsseo 在开发是 想要打印功能 但是打印数据不想显示出来 在打印的时候要打印初数据...
  • 以及记录一下在vue里面如何让浏览器弹出打印框打印这个表格table(一个在git上发现的好用的打印插件,不用install进项目,直接存一个js文件就能用,简单好用的vue打印插件)。下面代码粘贴出来另存为html文件就能...
  • vue 打印(模板套打)

    2021-01-08 04:06:09
    vue 使用 print-template 生成pdf 打印 。支持生成二维码、条形码、文本、图片、线  安装 yarn add print-template 或 npm install print-template 内容类型 line 线条 barcode 条形码 qrcode 二维码 ...
  • 最近帮同事解决一个前端页面布局问题,技术背景vue+elementui,出现问题如下:点击详情表格布局一切正常(列数不固定,估计后端返回决定)点击打印之后的表格出现不能撑满,多出空白列的情况。 未点击打印时布局...
  • 本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下 效果如图: html:后面的日期是循环出来的 <span class=calendar-left click=lastDateclick>< 近期事件 ...
  • vue打印插件使用

    2018-11-26 09:16:01
    vue打印插件使用 第一步: npm install vue-easy-print --save 第二步,在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export ...
  • 主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法,需要的朋友可以参考下
  • 添加全局样式 body .el-table th.gutter { display: table-cell !important; } body .el-table colgroup.gutter { display: table-cell !important; }
  • 不同分辨率下,页面内容打印不全的问题 参考的博客 https://www.cnblogs.com/scallop/p/14184580.html 参考的博客(scallop) 安装插件 print-js,html2canvas 页面使用 <template> <div> <el-...
  • 最近electron-vue项目中遇到打印功能,但是利用浏览器原生的打印功能(window.print())又无法预览打印界面,用户体验极差。后来偶然发现lodop这个神奇的web打印插件,通过把lodop打印插件整合到项目中,解决了问题。...
  • vue表格列错位问题

    2021-06-09 09:33:54
    使用v-if切换tab选项卡的时候,子内容表格的列可能会出现错位问题,官方给出的解决办法是使用doLayout方法,在这里总结了两种方法: 1.使用doLayout() <el-table :data="table" ref="table" > oLayout方法进行...
  • 主要为大家详细介绍了Vue实现数据表格合并列rowspan效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue移动端项目 一个可以固定表头首列的表格 ,没有使用UI插件。 感兴趣的朋友可以参考下,希望对大家有所帮助
  • 让你做 打印功能 但是呢 你这个打印 和你页面又不一样 这就很恶心了 要你自己画 这就难受了直接给你个图 如下图 然后呢还需要批量打印 怎么办呢? 1.用excle先画出来 ---- 2.重点来了 怎么把他变为代码 点击文件 -...
  • vue实现打印功能

    千次阅读 2021-03-13 17:06:26
    打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍两个打印插件 一、vue-print-nb:这个插件使用起来便捷,用法如下 1.安装 npm install vue-print-nb --save 2.在main.js文件中注册...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,166
精华内容 1,266
关键字:

vue打印表格

vue 订阅