一、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; 
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐