vue 打印

本文是基于vue3 进行写vue打印，vue2 只需要改动代码即可。

打印我使用的是vue3-print-nb，vue2也有对应的版本。

1. 安装vue3-print-nb

npm install vue3-print-nb --save

vue2 版本

npm install vue-print-nb --save 

安装完毕后，在vue3中使用是在main.js中进行引入

import print from 'vue3-print-nb'
createApp(App).use(store).use(router)
  .use(ElementPlus)
  .use(print)

 接着就是可以利用vue3-print-nb进行打印啦

我这里打印的数据是mock接口模拟的哦，大家自己也可以尝试着模拟数据过来

2.打印操作

 <el-button v-print="printObj" >打印</el-button>
//  利用v-print进行打印，printObj是一个方法
 <!-- 打印部分的内容，v-show用来控制显示与隐藏，必须要在id的外面上面写，如果在id中写，则打印的内容不生效 -->
  <div v-show='false'>
  <div id='printMe' >
    <!-- 打印的关键在与id，它是利用id进行查找内容进行打印 -->
     <div   v-for="(item,index) in data1" :key="index" >
      <h2 style='text-align:center;'>文章列表</h2>
     <div id='text'>
        <span>姓名：{{item.name}}</span>
        <span>创建时间：{{item.creataAt}}</span>
         <span>价格：{{item.sale}}</span>
          </div>
        <span>描述：{{item.desc}}</span>
    <table align='center'>
      <tr>
        <td colspan="2">第一行</td>
      </tr>
      <tr>
         <td>活动名称:{{form1.name}}</td>
         <td>活动区域:{{form1.region}}</td>
      </tr>
    </table>
      <!-- 用来控制分页 -->
     <div style="page-break-after: always;"></div>
    </div>
  </div>
  </div>

script中的代码

import { ref, onMounted } from 'vue'
import { print1 } from '@/api/index.js'
const form1 = ref({
  name: '',
  region: 'shanghai'
})
const printObj = ref({
  id: 'printMe', // 打印哪一部分的名字
  popTitle: 'good print' // 打印的标题
})
const data1 = ref([])
const getprint1 = async () => {
  const res = await print1()
  if (res.data.code === 200) {
    data1.value = res.data.data.list
  }
  console.log(data1.value)
}
onMounted(() => {
  getprint1()
})

打印的样式写法：一定不要 使用class 哦，可能在后续打包的过程中导致样式失效，可以使用media或者是行内样式来解决这个问题。

这里在style的上面，写media=‘printMe’ printMe就是你要打印的地方的名字是什么，然后根据id=printMe就可以设置它的样式。

<style lang="scss" media='printMe' scoped>
// 非打印部分的样式
#uu{
  background-color:blue;
}
// 打印部分的样式
#printMe  {
  #text{
   width:100%;
    background-color:blue;
    display:flex;
    height:120px;
     flex-wrap: wrap;
    span{
      width:33.3%;
      align-self:center;

    }
  }
  table{
    text-align: center;
    width:50%;
    height:100px;
    border-collapse: collapse;
  }
  td{
    border:1px solid black;

  }
   #printMe   ::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

  }
</style>

打印效果如下：

 

页面展示效果如下：

 

最后附上完整代码：

<template>
  <div>
    <!-- 在页面中显示打印的内容 -->
  <div  style='height:400px; overflow:auto;'>
     <div  v-for="(item,index) in data1" :key="index" >
      <h2 style='text-align:center;'>文章列表</h2>
     <div id='text'>
        <span>姓名：{{item.name}}</span>
        <span>创建时间：{{item.creataAt}}</span>
         <span>价格：{{item.sale}}</span>
          </div>
        <span>描述：{{item.desc}}</span>
    <table align='center'>
      <tr>
        <td colspan="2">第一行</td>
      </tr>
      <tr>
         <td>活动名称:{{form1.name}}</td>
         <td>活动区域:{{form1.region}}</td>
      </tr>
    </table>
    </div>
  </div>

  <!-- 打印部分的内容，v-show用来控制显示与隐藏，必须要在id的外面上面写，如果在id中写，则打印的内容不生效 -->
  <div v-show='false'>
  <div id='printMe' >
    <!-- 打印的关键在与id，它是利用id进行查找内容进行打印 -->
     <div   v-for="(item,index) in data1" :key="index" >
      <h2 style='text-align:center;'>文章列表</h2>
     <div id='text'>
        <span>姓名：{{item.name}}</span>
        <span>创建时间：{{item.creataAt}}</span>
         <span>价格：{{item.sale}}</span>
          </div>
        <span>描述：{{item.desc}}</span>
    <table align='center'>
      <tr>
        <td colspan="2">第一行</td>
      </tr>
      <tr>
         <td>活动名称:{{form1.name}}</td>
         <td>活动区域:{{form1.region}}</td>
      </tr>
    </table>
      <!-- 用来控制分页 -->
     <div style="page-break-after: always;"></div>
    </div>
  </div>
  </div>
 <el-button v-print="printObj" >打印</el-button>

  <div>
       <el-form ref="form" :model="form1" label-width="80px" id='uu'>
             <el-form-item label="活动名称">
               <el-input v-model="form1.name"></el-input>
             </el-form-item>
     <el-form-item label="活动区域">
             <el-select v-model="form1.region" placeholder="请选择活动区域">
               <el-option label="区域一" value="shanghai"></el-option>
               <el-option label="区域二" value="beijing"></el-option>
             </el-select>
    </el-form-item>
       </el-form>
    </div>
  </div>
</template>

<script  setup>
import { ref, onMounted } from 'vue'
import { print1 } from '@/api/index.js'
const form1 = ref({
  name: '',
  region: 'shanghai'
})
const printObj = ref({
  id: 'printMe', // 打印哪一部分的名字
  popTitle: 'good print' // 打印的标题
})
const data1 = ref([])
const getprint1 = async () => {
  const res = await print1()
  if (res.data.code === 200) {
    data1.value = res.data.data.list
  }
  console.log(data1.value)
}
onMounted(() => {
  getprint1()
})
</script>

<style lang="scss" media='printMe' scoped>
// 非打印部分的样式
#uu{
  background-color:blue;
}
// 打印部分的样式
#printMe  {
  #text{
   width:100%;
    background-color:blue;
    display:flex;
    height:120px;
     flex-wrap: wrap;
    span{
      width:33.3%;
      align-self:center;

    }
  }
  table{
    text-align: center;
    width:50%;
    height:100px;
    border-collapse: collapse;
  }
  td{
    border:1px solid black;

  }
   #printMe   ::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

  }
</style>