vue实现打印功能 vue-print-nb

最新推荐文章于 2024-03-28 10:26:36 发布

乐容

最新推荐文章于 2024-03-28 10:26:36 发布

阅读量382

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_61265297/article/details/127805688

版权

1，安装

npm install vue-print-nb --save

2，main.js引入

import Print from 'vue-print-nb'
Vue.use(Print);

3，打印实现

<template>
  <div class="table">
    <div class="tableList">
      <div id="printMe">
        <div class="title">打印模板</div>
        <div class="content-table-img">
          <div class="table-name-one">XXXX</div>
          <div class="table-info-img">
            <div class="imgsrc">
              <img
                v-if="list.img"
                :src="list.img"
              />
            </div>
          </div>
        </div>
      </div>

      <div  class="table-btn">
        <Button type="info" v-print="printObj" class="btn-no">打印</Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "printInfo",
  data() {
    return {
      list:[],
      printObj: {
        id: "printMe",
        popTitle: "标题",
      
      },
    };
  },
  methods: {},
  computed: {},
  created() { },
};
</script>

<style   scoped>

</style>