Vue打印插件vue-print-nb的使用

我使用的是vue2版本的，vue3的以后用到了再研究

一 安装vue-print-nb

npm install vue-print-nb --save

二 引入Vue项目

main.js

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

三 基础使用

data () {
    return {
      // 打印配置
      print: {
        id: 'printArea',
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: true, // 是否启动预览模式，默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
        previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
        beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了！') },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }

<template>
    <div class="order_details" id="printArea">
        // 在id=printArea的所有标签内的内容都可以打印
        <div class="order_details_hd padding_20">
            <h2 class="order_info_title">订单信息</h2>
            <div class="btn_area">
                <!-- class="noprint"： 隐藏打印区域不需要打印的内容 -->
                <Button
                    class="noprint"
                    v-print="print"
                >打印</Button
                >
            </div>
            <div class="order_id_status flex_jcsb">
                这里都是打印的内容
            </div>
        </div>
    </div>
</template>
import data from './index.js'
<script>
export default {
    data() {
        return data;
    },
}
</script>
<style media="print">
@media print {
    /* 隐藏页眉页脚 */
    @page {
        size: auto;
        margin: 3mm;
    }
    html {
        zoom: 85%; /* 缩放比例设置 */
    }
    .noprint {
        display: none; /* 隐藏打印区域不需要打印的内容 */
    }
}
</style>

四 具体参数

具体参数说明可参考 huaweicloud.csdn.net/638ee18fdac…

五 一些优化和小问题

1. 缩放的问题

首先要说下缩放的问题， 背景是，需要打印的内容过多，测试说要把内容都放到一页，不需要两页， 我搜到的很多答案都是用transform: scale(0.9)进行缩放， 缩放是可以缩放，但是第二页的内容还是在第二页，后面看到一篇文章用的是zoom， 后面才实现了这个功能

<style media="print">
@media print {
    html {
        zoom: 85%; /* 缩放比例设置 */
    }
}
</style>

2. 隐藏打印区域内不需要打印的内容

给需要隐藏的元素添加noprint的css类

<style media="print">
@media print {
    .noprint {
        display: none; /* 隐藏打印区域不需要打印的内容 */
    }
}
</style>

3. 隐藏页眉页脚

<style media="print">
@media print {
    /* 隐藏页眉页脚 */
    @page {
        size: auto;
        margin: 3mm;
    }
}
</style>

4. 打印內容不自动换行问题

只需要给不自动换行的标签加上word-wrap:break-word;  即可

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>