vue项目 前端实现打印功能

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>