vue 封装print-js打印页面数据、页面样式

npm install print-js --save-dev

1、数据打印成表格

1、创建print.js用于封装

import printJS from "print-js";
/**
 * 
 * @param {
 *      title:"", // 表名
 *      serial：false, // 是否需要序号
 *      data:[], // 要打印的数据
 *      fields:[], // 需要打印的字段
 *      properties:[
 *          {
 *              field:"字段名（对应fields）",
 *              displayName:"打印时展示的中文表头名字",
 *              columnSize:"定义列宽，用百分比来表示大小，可不传"
 *          }
 *      ],
 * } args
 *  
 */
function printJson(args = {}) {
    let data = [];
    for (let di = 0; di < args.data.length; di++) {
        var obj = {}
        // 如果需要序列号则是列表index+1
        if (args.serial) {
            obj.serial = di + 1
        }
        // 遍历需要打印的字段与列表字段一一对应，形成键值对
        for (let fi = 0; fi < args.fields.length; fi++) {
            obj[args.fields[fi]] = args.data[di][args.fields[fi]]
        }
        data.push(obj)
    }
    let properties = args.properties;
    if (args.serial) {
        properties.unshift({
            field: "serial",
            displayName: "序号",
        })
    }
    printJS({
       printable: data,
       properties: properties || [],
       header: args.title || "",
       // 样式设置
       type: 'json',  // 打印的格式  
       gridStyle: 'border: 1px solid #000;text-align:center;padding:5px 0;', // 表格样式  
       gridHeaderStyle: 'border: 1px solid #000;text-align:center;padding:5px 0;',//表头样式
    });
}

export default {
    printJson
}

2、在需要使用的地方引入print.js，下面是全局引入到main.js中

import Vue from 'vue'
import config from "./util/config";
import App from './App'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'video.js/dist/video-js.css'
import 'element-ui/lib/theme-chalk/index.css'
if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.use(ElementUI)


// 引入Print.js
import print from "./util/print";
// 放入vue原型中
Vue.prototype.printJson = print.printJson;


/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

3、使用方法 

<template>
  <div class="fixed-page">
    <main>
        <div class="searchBox">
          <div class="inputBox">
            <el-button type="primary" @click="printFun">打 印</el-button>
          </div>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
            height="250">
            <el-table-column
              fixed
              prop="date"
              label="日期"
              width="150">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="province"
              label="省份"
              width="120">
            </el-table-column>
            <el-table-column
              prop="city"
              label="市区"
              width="320">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="600">
            </el-table-column>
            <el-table-column
              prop="zip"
              label="邮编"
              width="120">
            </el-table-column>
        </el-table>   
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
    };
  },
  mounted() {},
  methods: {
    printFun() {
      this.printJson({
        title: "收货地址",  // 打印出来的标题
        data: this.tableData,  // 需要打印的数据
        serial: false,  // 是否需要打印序列号
        fields: [  // 需要打印的字段
          "name",
          "province",
          "city",
          "address",
        ],
        properties: [ // 需要打印的字段对应的表头名
          {
            field: "name",
            displayName: "姓名",
          },
          {
            field: "province",
            displayName: "省份",
          },
          {
            field: "city",
            displayName: "城市",
          },
          {
            field: "address",
            displayName: "具体地址",
          },
        ],
      });
    },
  }
};
</script>

<style lang="scss">
</style>

2、页面打印

页面打印就是直接打印页面上的内容、包括图片，但是背景图片尝试打印后打印失败，所以将背景图片换成了img利用绝对定位当成背景图片，这样才可以完整的将背景图片打印下来，实现代码如下

<template>
  <div class="resident-right">
   // 需要打印的html片段设置一个id
    <main id="printMain">
      <div class="infoBox">
        <h1>基本信息</h1>
        <section>
          <cell-box
            label="姓名"
            :value="detail.name"
            width="18%"
          ></cell-box>
          <cell-box
            label="性别"
            :value="detail.sexCN"
            width="20%"
          ></cell-box>
          <cell-box
            label="年龄"
            :value="detail.age"
            width="20%"
          ></cell-box>
          <cell-box
            label="出生日期"
            :value="detail.birthday"
            width="40%"
          ></cell-box>
          <cell-box
            label="身份证号码"
            :value="detail.idCard"
            width="38%"
          ></cell-box>
          <cell-box
            label="手机"
            :value="detail.mobilePhone"
            width="25%"
          ></cell-box>
          <cell-box
            label="座机"
            :value="detail.telephone"
            width="20%"
          ></cell-box>
          <cell-box
            label="血型"
            :value="detail.bloodGroup"
            width="25%"
          ></cell-box>
        </section>
      </div>
      <div class="avatar">
        <img :src="detail.image" alt="" />
         // 打印时需要忽略的片段设置id
        <div id="no-print">
          <el-button type="primary" @click="printFun">打印</el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import printJS from "print-js";
export default {
  props: ["detail"],
  methods: {
    printFun() {
      printJS({ 
        printable: "printMain",   // 设置需要打印片段id
        type: "html",
        targetStyles: ["*"],  // 需要保留的样式，*代表所有
        ignoreElements: ["no-print"],  // 需要忽略的元素，id集合
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.resident-right {
  width: calc(100% - 250px);
  height: 100%;
}
main {
  height: calc(100% - 40px);
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.infoBox {
  width: calc(100% - 120px);
}
.avatar {
  width: 110px;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-button {
    padding: 0;
    margin-top: 10px;
  }
}
.avatar img {
  width: 100%;
}
.infoBox h1 {
  font-size: 16px;
  text-align: center;
  margin: 0 0 10px;
  line-height: 25px;
  background-color: #cccccc;
}
.infoBox section {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
</style>