vue 数据打印_vue 打印

第三方依赖vue-printjs（下面示例打印的是Html类型,该插件可以指定不打印的部分）

        资源包网址：GitHub - xyl66/vuePlugs_printjs: vue打印插件

效果图：

1.安装vue-printjs

npm i vue-printjs -S

2.main.js全局引入vue-printjs

1. import Print from 'vue-printjs'

2. Vue.use(Print)

3.在需要打印表格或数据的组件中使用

<template>
    <!-- 打印 -->
    <el-button
        size="mini"
        class="el-icon-printer"
        @click="printJson"
    ></el-button>
    <!-- 要打印的表格部分,定义属性ref='table' -->
    <el-table
        :data="list"
        border
        row-key="name"
        ref="table"
      >
        <!-- 序号 -->
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50px"
          height="24px"
        ></el-table-column>
        <el-table-column
          label="用户"
          align="left"
          width="120px"
          class="addline"
        >
        </el-table-column>
        <el-table-column
          prop="Staff_Name"
          label="姓名"
          align="left"
          width="80px"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 不需要打印表格中的列部分,定义class-name="no-print"（在el-table-column标签中，定义class要用它的class-name属性） -->
        <el-table-column label="操作" align="center" width="50px" class-name="no-print">
          <template slot-scope="scope">
            <el-button
              @click="delateList(scope.row)"
              class="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="" align="center" width="" class-name="no-print"></el-table-column>
      </el-table>
</template>
 
<script type="text/javascript">
export default {
  data() {
    return {
        list : [],
    };
  },
  methods: {
      printJson() {
          this.$print(this.$refs.table);
        },
    }
};
</script>

4.点击打印按钮，弹出打印预览界面，右边栏调整打印界面——打印。 

*注意： 打印多页需要在vue-printJS代码中添加：

1. // 在print.js文件中添加

2. str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";

*在main.js中找到引入的vue-printjs文件（ Ctrl+鼠标单击 ）打开print.js文件 

 *在红框位置添加一下代码

// 在print.js文件中添加
str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";