vue2

1.下载插件

   cnpm install vue-print-nb --save
   或
   yarn add vue-print-nb

2.在main引入

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

//局部
import print from 'vue-print-nb'
directives: {
    print   
}

3.基本使用

    <div id="printContent" >
　　　　　<p>要打印的内容</p>
　　</div>
    <button v-print="'#printContent'">打印</button>
    

vue3

引入

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

使用

 <button v-print="printObj">Print local range</button><div id="loading" v-show="printLoading"></div>
 
  <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>
    
    
    export default {
    data() {
        return {
           printLoading: true,
            printObj: {
              id: "printMe",
              popTitle: 'good print',
              extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
              beforeOpenCallback (vue) {
                vue.printLoading = true
                console.log('打开之前')
              },
              openCallback (vue) {
                vue.printLoading = false
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

使用插件打印el-table无法显示全 ，解决如下：

1下载插件

yarn add print-js
yarn add html2canvas

2.页面使用

<template>
	<div>
		<el-button class="acticedBtn" @click="printFn">打印</el-button>
		<div ref="printId">
		 打印的内容
		</div>
	</div>
</template>
<script>
import printJS from 'print-js';
import html2canvas from 'html2canvas';
export default {
	methods:{
		printFn(){ 
                // this.$refs.printId 是获取节点 //如果你绑定的是elementUI那获取节点的方式不一样会报错
			const printContent = this.$refs.printId;
			// 获取dom 宽度 高度
			const width = printContent.clientWidth;
			const height = printContent.clientHeight;
			// 创建一个canvas节点
			const canvas = document.createElement('canvas');
		
			const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
			canvas.width = width * scale; // 定义canvas 宽度 * 缩放
			canvas.height = height * scale; // 定义canvas高度 *缩放
			canvas.style.width = width * scale + 'px';
			canvas.style.height = height * scale + 'px';
			canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale
		
			const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
			const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
		
			html2canvas(printContent, {
				canvas,
				backgroundColor: null,
				useCORS: true,
				windowHeight: document.body.scrollHeight,
				scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
				scrollY: -scrollTop
			}).then((canvas) => {
				const url = canvas.toDataURL('image/png')
				printJS({
				printable: url,
				type: 'image',
				documentTitle: '', // 标题
				style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚
				})
			}).catch(err=>{
				console.error(err);
			})
		}
	}
}
</script>

3.还有一种方式就是自己手写一个table

官方地址：github.com/Power-kxLee…