vue-easy-print

vue-easy-print

A print component that supports both Vue 2 and Vue 3.

中文文档

English

Core

Render the print template through a Vue slot. Copy the print area into an iframe and trigger the browser print flow.

Online demo

Updates

2026-03-13 ver 1.0.0

• adds support for both Vue 2 and Vue 3
• adds styleHTML props, thanks to mrliuc
• removed unused props; print styles are now fully managed by the template.

2021 ver 0.0.7

• fixes compatibility issues, thanks to Wizard67

Quick Start

Step 1

npm install vue-easy-print --save

Step 2: register the component in your Vue page

import vueEasyPrint from "vue-easy-print";
import demo from "./your path/demo";

export default {
    components: {
        vueEasyPrint,
        demo
    }
};

Step 3: provide the print template

<vue-easy-print tableShow>
    <template slot-scope="func">
        <demo :getChineseNumber="func.getChineseNumber"></demo>
    </template>
</vue-easy-print>

slot-scope

The default slot exposes the getChineseNumber helper, which converts a numeric amount into uppercase Chinese currency text.

Props

Methods

Full Demo

Code

<template>
    <div id="app">
        <button @click="printDemo">Test Print</button>
        <vue-easy-print tableShow ref="easyPrint">
            <!-- Write your own print template -->
            <!-- <template slot-scope="func">
                <demo :getChineseNumber="func.getChineseNumber"></demo>
            </template> -->
        </vue-easy-print>
    </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";
import demo from "./components/demo";

export default {
  name: "App",
  data() {
    return {
      tableData: {
        id: 998,
        store_name: "Test Store",
        created_at: "2018-06-06 15:21:35",

        detail: [
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          },
          {
            name: "Product A",
            item_unit: "40ML",
            item_size: "Bottle",
            item_quantity: 5,
            item_price: 188,
            pv: 150,
            item_total: 5 * 188,
            item_total_pv: 5 * 150
          }
        ]
      }
    };
  },
  methods: {
    printDemo() {
      this.$refs.easyPrint.print();
    }
  },
  components: {
    vueEasyPrint,
    demo
  }
};
</script>

License

MIT