一、vue-print-nb 实现打印功能

1、安装

cnpm i vue-print-nb -S

2、在main.js 中引入

import Print from 'vue-print-nb'
Vue.use(Print)

3、在vue页面中的使用

<template>
    <div class="print">
        <div id="printPage">
            这里面是放的打印内容
        </div>
        <button v-print="'#printPage'">打印</button>
    </div>
</template>

v-print 中的内容 和 id对应,打印出来的内容是 整个id框框内的内容

4、打印分页 style="page-break-after: always"

<template>
    <div class="print">
        <div id="printPage">
            // 这里面是放的打印内容
              <div style="page-break-after: always">
                   // 打印的第一页内容
              </div>
              <div style="page-break-after: always">
                   // 打印的第二页内容
              </div>
        </div>
        <button v-print="'#printPage'">打印</button>
    </div>
</template>

二、网页 用针式打印机打印模糊问题

原因:网页的打印,是先生成一张图片,接着打印,针式打印机打印会模糊;
解决:试着调整打印的文字的字体,我这里:

font-family: Microsoft YaHei;
color: #000; 
Logo

前往低代码交流专区

更多推荐