标签：status 功能 Vue 凤爪 name 王小虎 打印 print happy

Vue 实现 print

第一步 安装组件

//安装print-js
npm install vue-print-nb --save

第二步 在 main.js 全局引入

// 引入下载的print
import print from 'vue-print-nb'
// 全局使用
Vue.use(print);

第三步 使用

<template>
  <div>
    <div class="table">
      <p class="title">统计图表</p>
      <el-table :data="tableData" border id="printContainer">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="happy" label="爱好"></el-table-column>
      </el-table>
    </div>
    <el-button type="primary" v-show="showbutton" v-print="printObj" @click="printButton">打印</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          happy: "王小卤虎皮凤爪",
          status: 0
        },
        {
          name: "王小虎",
          happy: "王小卤虎皮凤爪",
          status: 1
        },
        {
          name: "王小虎",
          happy: "王小卤虎皮凤爪",
          status: 0
        },
        {
          name: "王小虎",
          happy: "王小卤虎皮凤爪",
          status: 1
        }
      ],
      showbutton: true, //打印按钮显示
      printObj: {
        printable: "printContainer", // 标签元素id
        type: "html",
        header: "",
        targetStyles: ["*"],
        style: "@page {margin:0mm 10mm};", //控制页眉页尾间距
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    };
  },
  mounted() {
    console.log(this.$route.params.userId);
  },
  methods: {
    printButton() {
      this.showbutton = false;
    }
  }
};
</script>
<style scoped>
#printContainer {
  width: 100%;
}
#printContainer .el-table {
  align-content: center;
}
.table {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.title {
  text-align: center;
  padding: 20px 0px;
}
@page {
  size: auto A4 landscape;
  margin: 3mm;
}
</style>

标签：status,功能,Vue,凤爪,name,王小虎,打印,print,happy
来源： https://www.cnblogs.com/cxywz/p/15846870.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。