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: 0;
}
</style>