vue中打印表格功能（重點是表格製作）

原創 ༺༂鑫༒海༂༻ 2019-09-15 16:36

第一種表格

先上效果圖：
在這裏插入圖片描述
在這裏插入圖片描述
上圖就是打印的效果，但表格的樣式沒有出來，在vue-cli腳手架裏樣式是起作用的。
這個打印是用的原生javascript的方法實現的，但引用了vue.js和element

代碼如下：

<!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;">日期：2019年08月03日</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;">出庫日期：2019年08月03日</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+Elemet】 el-tree懶加載自定義葉子節點基礎版+延伸版

博主另一篇：vue+element tree各項功能代碼詳解 鏈接：https://blog.csdn.net/Hei_lovely_cat/article/details/105763739 一、基礎版 效果 element樹組件 添

知永无涯 2020-07-07 22:09:56

vue (vue搭建npm/cnpm，element-ui插件,jquery插件），安裝npm 安裝cnp melement-ui jquery

vue 介紹：vue構建用戶界面的漸進式框架 起步，使用vue必須搭建環境——node nodejs下載 安裝配置：node 安裝配置 下載node 地址：node下載 選擇window系統，建議安裝 .msi安裝包； 下一步——

S-A 2020-07-06 10:41:19

vue+element 對日期時間選取做限制及上傳時格式的判斷

首先，我們要說明下需求！ 開始時間及結束時間默認爲三天前到今天 開始時間不能選取結束時間之後（結束時間同理） 上傳時間爲yyyy-MM-dd hh:mm:ss格式 其中一個需求是隻能選擇未來一個月的數據，代碼在下 注意： 當時間爲空時，不

知永无涯 2020-07-02 17:07:31

vue+element 封裝動態選擇列表界面

查詢條件及列表都是動態配置 界面: 使用: <el-input v-model="name" readonly class="input-with-select"> <el-butto

蓝色V诱惑 2020-06-29 12:07:39

vue 試卷控件 彈出模式

代碼 paperConfig:{ type:3, title: '閱卷', visible: true, paperData:{

蓝色V诱惑 2020-06-29 12:07:39

Vue-element-admin 基礎模板

# 克隆項目 git clone https://github.com/xzhPinellia/Vue-element-admin.git # 進入項目目錄 cd Vue-element-admin # 安裝依賴 npm ins

、Pinellia 2020-06-26 20:45:59

樣式打包後消失問題LESS文件 -WEBKIT-BOX-ORIENT: VERTICAL;

 在-webkit-box-orient: vertical;前後加上! autoprefixer /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefix

瘦瘦的小芝芝 2020-06-25 16:35:23

vue+elementUI，用到的需要說明的一些功能

1、級聯選擇器（el-cascader） 先看一下效果吧，這個是選擇的效果，支持多選，根節點禁選 這個是回顯的效果 接下來說一下怎麼實現吧~ //其中platList爲數據源,codeList是綁定選中的值，props爲配置選項，c

summer_雪 2020-06-23 19:22:07

vue進階總結二

上篇僅僅談論到接口數據渲染，這篇主要是使用過程中的demo web端牽扯到會員，那就需要跳轉路由判斷是否登錄 解決方法：1、路由配置文件router/index.js 跳轉路由前判斷是否登錄2、關於涉及權限頁面組件加載函數判斷

何忧非喜{傲娇的程序媛} 2020-06-23 01:17:57

vue進階總結一

最近由於公司需要，一直在專研vue和element，vue和bootstrap的用法，以下是我開發中所牽扯到的，希望對友人們有所幫組。 vue和必須依賴安裝，在此略過（大家都輕鬆可以搞定噠） axios跨域設置 打包相對路徑設置

何忧非喜{傲娇的程序媛} 2020-06-23 01:17:57

vue進階總結三

請求接口返回的字段，渲染的時候需要拼接部分字符串，起初盲目for循環拼接，下班後回想起總感覺不對勁，果然，哈哈，vue變量字符串拼接是各種支持的呢 // 表格渲染，行數據單獨處理 slot-scope="scope" <e

何忧非喜{傲娇的程序媛} 2020-06-23 01:17:57

vue+element實現給表頭添加註解

具體實現效果： 具體需求：實現對錶格表頭進行介紹 具體實現：”123“的說明爲”qwe“ 代碼實現： <el-table-column label="123" prop="qysm" :render-header="render

城南君 2020-06-19 09:19:33

springmvc 跨域設置

我的springMVC版本爲5.0.5 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId>

雪月弦歌 2020-06-17 15:47:25

原生JS實現Touch滑動反彈

<template> <div> <div class="box"> <ul @touchstart='touchstart' @touchmove='touchmove' @touche

honghong.zhou 2020-06-17 12:18:24

Vue居中彈窗加vue動畫

<template> <div> <p @click="toggle" class="h4000">展示彈窗</p> <div class="box"> <transition name="op

honghong.zhou 2020-06-17 12:18:24