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

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

 1.安装vue-printjs

npm i vue-printjs -S

2.全局引入vue-printjs

//该文件为main.js
import Print from 'vue-printjs'
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代码中添加:

// 在print.js文件中添加
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>"; 

 

 

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐