vue專案 前端實作列印功能
vue已經幫我們封裝好了使用非常方便的安裝包，安裝了依賴包之后可以很簡單地就實作列印功能，
使用步驟如下：
1.下載安裝包
npm install vue-print-nb --save
2.在main.js檔案中引入安裝包并注冊組件
import Print from 'vue-print-nb'
Vue.use(Print);
3.使用Print
3.1 給要列印的dom標簽(要列印的內容部分)系結一個id
3.2 給button按鈕系結v-print指令，值是上面系結的那個id,要加 # 哦，類似于選擇器的寫法
示例：
<el-button type="primary" v-print="'#print_content'">列印</el-button>
<div id="print_content" >
<table>
<tr>
<th colspan="2"></th>
<th class="table_head">固定資產投資</th>
<th class="table_head">股權投資</th>
<th class="table_head">房地產投資</th>
<th class="table_head" style=" ">合計</th>
</tr>
<tr>
<td colspan="2">計劃總額（萬元）</td>
<td>{{upload['固定資產投資']['總額']}}</td>
<td>{{upload['股權投資']['總額']}}</td>
<td>{{upload['房地產投資']['總額']}}</td>
<td>{{upload['合計']['總額']}}</td>
</tr>
<tr>
<td rowspan="2">按投資方向（萬元）</td>
<td>主業</td>
<td>{{upload['固定資產投資']['主業']}}</td>
<td>{{upload['股權投資']['主業']}}</td>
<td>{{upload['房地產投資']['主業']}}</td>
<td>{{upload['合計']['主業']}}</td>
</tr>
<tr>
<td>非主業</td>
<td>{{upload['固定資產投資']['非主業']}}</td>
<td>{{upload['股權投資']['非主業']}}</td>
<td>{{upload['房地產投資']['非主業']}}</td>
<td>{{upload['合計']['非主業']}}</td>
</tr>
</table>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/257857.html
標籤：區塊鏈