前端打印 (vue)

1.依赖vue-print-nb  插件

npm i vue-print-nb

2.main.js   注册使用

import Print from "vue-print-nb";

Vue.use(Print);

3.App.vue   打印预览基础样式（边距 宽高）

<style media="print" lang="less">

@media print {

    @page {

        size: auto;

        margin: 2mm;

    }

    body,

    html {

        height: auto !important;

    }

    //不需要打印的内容 加该类名

    .noprint {

        display: none !important;

    }

}

</style>

4.页面使用

<template> 
  <div class="main-box fc" v-loading="loading" id="diaPrint">
     <div class="noprint">不需要打印的内容加个类名noprint  该类名已在App.vue添加了</div>
     <el-button v-print="print">打印</el-button>
  </div>
</template>

<script>
data(){
print: {
 return{
    id: "diaPrint",
    popTitle: "xxx", // 打印配置页上方标题
    extraHead: "", //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
    preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
    previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
    previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
    zIndex: 20002, // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
    previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
    previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
    beforeOpenCallback() {}, // 开启打印前的回调事件
    openCallback() {}, // 调用打印之后的回调事件
    closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
    url: "",
    standard: "",
    extraCss: "",
    },
 }
}
</script>

//针对打印预览里的样式
<style media="print" lang="less">
@media print {
    .business-title {
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}
</style>

 

 

原文地址：https://blog.csdn.net/i_am_father_for_/article/details/144395642

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！