一、打印当前页数据

单页打印.png

只对当前页面可见数据进行打印，实现方法不唯一，此处介绍相对简单的vue-print-nb。他的缺点是只能打印可见区域，不能分页打印。

1.安装

npm install vue-print-nb --save

2.引入

// 安装好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print);  //注册

3.使用

3.1直接使用id，不对最终打印的表格进行样式修改

template

 // 通过ID直接打印
  <div id="print_demo" >
    <p>打印内容</p>
  </div>
<button v-print="'#print_demo'">打印</button>

3.2使用printObj，可以对打印的表格进行样式调整

template

// 使用printObj
  <button v-print="printObj">打印</button>
 
<div id="print_demo" style="background:red;">
  <p>打印内容</p>
</div>

script

export default {
    data() {
        return {
            printObj: {
              id: "print_demo",
              popTitle: '打印的标题',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        };
    }
}

二、打印数据库内全部数据

全部打印.png

将数据库内的全部数据以表格的形式进行打印，需要调用后台接口直接从数据库内进行数据的查找，而不是直接在页面内获取数据。

1.安装

npm install print-js --save

2.引入

// 在当前vue文件内引用
import printJS from 'print-js'

3.使用

template

<el-button  @click="printJson">打印全部表格</el-button>

script-->methods

async printJson() {
      //通过getdata调用后台接口获取数据封装到res
      const res = await getdata();
      this.list = res.data || [];
      let data = []
      for (let i=0; i < this.list.length; i++) {
          data.push({
          field1: this.list[i].field1,
          field2: this.list[i].field2,
          field3: this.list[i].field3,
          field4: this.list[i].field4,
        })
      }
      printJS({
        printable: data,
        properties: [
          {
            field: 'field1',
            displayName: '第一个字段',
            columnSize: 1
          },
          {
            field: 'field2',
            displayName: '第二个字段',
            columnSize: 1
          },
          {
            field: 'field3',
            displayName: '第三个字段',
            columnSize: 1
          },
          {
            field: 'field4',
            displayName: '第四个字段',
            columnSize: 1
          }
        ],
        type: 'json',
        header: '标题',
        // 样式设置
        gridStyle: 'border: 2px solid #3971A5;',
        gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;'
      })
    },