Printd

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="https://unpkg.com/printd/dist/printd.umd.min.js"></script>

<div id="app">
<template>
  <button @click="getData">Get Data</button>  
  <button @click="resetData">Reset Data</button> 
  <button @click="showH">Show Header</button>
  <button @click="print">Print</button>
  
  <div id="print">
  <p v-show="showHeader" class="header">
    My Header
  </p>
  <p>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </p>
    </div>
    
</template>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

.header {
   text-align: center;
   color: #c7254e;
   font-weigth: 500;
}

Babel + JSX

var Main = {
    data() {
      return {
      	showHeader : false,
        tableData: [],
        cssText: `
            .header {
            	text-align: center;
              color: #c7254e;
            }
          `
      }
    },
    mounted () {
      const { Printd } = window.printd
      this.d = new Printd()

      // Print dialog events (v0.0.9+)
      const { contentWindow } = this.d.getIFrame()

      contentWindow.addEventListener(
        'beforeprint', () => alert('before print event!')
      )
      contentWindow.addEventListener(
        'afterprint', () => alert('after print event!')
      )
  },
		methods:{
			showH(){
				this.showHeader = ! this.showHeader;
			},
      getData(){
      	this.tableData = [];
      	for(let i=1; i<=100; i++){
          this.tableData.push({
            date: '2016-05-0'+i,
            name: 'Tom '+i,
            address: 'No. ' + 1
          });
        }
      },
      resetData(){
      	this.tableData = [];
      },
      print(){
      	this.d.print(document.getElementById('print'), this.cssText)
      }
		}
  }

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')