vue使用print.js打印插件

任务：解决vue页面局部打印功能

print.js插件，可以打印 html、pdf、json数据
官网：https://printjs.crabbly.com/
一个整理的很好的讲解:https://www.jianshu.com/p/bc079fbb20c7

一、步骤：

1.安装插件

 npm install print-js --save

2.在需要打印的页面导入库

 import print from 'print-js'

3.在vue文件中新建一个打印div盒子 ，设一个 id 值（printBox），作为打印的区域

以下作为测试代码，测试了表循环data中的数据、图片、echart图表。以下是打印区域

 <div id="printBox">
      <h3>打印预览</h3>
      <div style="display:flex;color:#333;">
        <div style="margin-right:20px;">用户：{{ user }}</div>
        <div>园区：{{ garden }}</div>
      </div>
      <table border="1"
        cellspacing="0"
        cellpadding="3mm"
        width="1000px"
        style="margin-top:20px;color:pink;"
      >
        <tr>
          <td>日期</td>
          <td>姓名</td>
          <td>地址</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
      <div id="main" style="width: 600px;height:400px;margin-top:50px;"></div>
      <img src="../../assets/bg-b.png" width="500px" style="margin-top:50px;" />
    </div>

4.在打印按钮上添加点击事件

<el-button type="success" @click="printBox">打印Box</el-button>

5.在methods中添加点击事件

必要的就是printable和type

printBox() {
      setTimeout(function() {
        print({
          printable: 'printBox',	//打印区域id
          type: 'html',		//打印类型是html
          scanStyles: false,
          targetStyles: ['*'],
        })
      }, 500)
    },

二、注意事项

1.在打印区域内必须用行内样式，不然打印的时候就没有样式。（print.js好像有自带的属性可以加css，但是我没有搞明白，行内就行内吧）

<div style="display:flex;color:#333;">

2.echart函数调用必须要放到mounted里面，不然不显示。

3.在print里，以下两行至少加一行，不然行内样式的padding和margin就不管用了

scanStyles: false,
targetStyles: ['*'],

三、完整代码

<template>
  <div class="test">
    <div id="printBox">
      <h3>打印预览</h3>
      <div style="display:flex;color:#333;">
        <div style="margin-right:20px;">用户：{{ user }}</div>
        <div>园区：{{ garden }}</div>
      <div style="padding:30px;width:100px;height:50px;background:skyblue;border:1px solid #ccc;">测试padding</div>
      </div>
      <table
        border="1"
        cellspacing="0"
        cellpadding="3mm"
        width="1000px"
        style="margin-top:20px;color:pink;"
      >
        <tr>
          <td>日期</td>
          <td>姓名</td>
          <td>地址</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>

      <div id="main" style="width: 600px;height:400px;margin-top:20px;"></div>

      <img src="../../assets/bg-b.png" width="500px" style="margin-top:50px;" />
    </div>

    <div class="btns">
      <!-- 按钮 -->
      <el-button type="primary" @click="printAll">js打印</el-button>
      <el-button type="success" @click="printBox">打印Box</el-button>
    </div>
  </div>
</template>

<script>
import print from 'print-js'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      garden: '院士智谷',
      user: 'admin',
    }
  },
  mounted() {
    this.getEchart()
  },
  methods: {
     //原生的打印
    printAll() {
      window.print()
    },
    printBox() {
      setTimeout(function() {
        print({
          printable: 'printBox',
          type: 'html',
          scanStyles: false,
          targetStyles: ['*'],
          // style: '#printBox{ display: block !important}', // 表格样式
          // HonorMarginPadding: false,
        })
      }, 500)
    },
    getEchart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
.test {
  margin: 50px;
}
</style>

四、效果图

浏览器效果

原生js打印

print打印