Vue中好用的打印组件 vue-print-nb

首先下载包

npm i vue-print-nb

 按需引入页面并使用, 这个组件的好处是可以保留已有的样式, 不用写两套css (如果你使用的是print.js, 你是需要写两套css的)

<div id="printAvailable">id是打印区域</div>
<button v-print="printMe">点击打印</button>

<script>
import Print from 'vue-print-nb'
export default {
    directives: { Print },
    data() {
        printMe: {
            // 打印区域
            id: 'printAvailable',
            // 是否有打印预览
            preview: false
        }
    }
}
</script>

去掉页脚页眉, 控制横竖向打印

<style>
@page {
    // 横向
    size: landscape;
    margin: 0mm;
  }
</style>