vue3 如何实现打印功能

场景

大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,那么本篇文章就是在vue3中,使用vue3-print-nb插件来区域打印,实现指哪打哪!

一。安装vue3-print-nb

java 复制代码
npm install vue3-print-nb

2.导入main.ts中(可能会飘红不用理会)

复制代码
//引入
import print from 'vue3-print-nb'
//挂载
const app = createApp(App)
app.use(print)

3再html中使用

js 复制代码
<!-- 打印区域容器 -->
    <el-table ref="multipleTableRef" border :data="teacherTableData" style="width: 100%"
                    id="printDiv"
                    @row-click="toggleSelection"
                    @selection-change="teacherHandleSelectionChange">
            <el-table-column label="选择" type="selection" width="55"/>
            <el-table-column label="序号" type="index" width="55"/>
            <el-table-column label="姓名" property="name" min-width="100"></el-table-column>
            <el-table-column property="genderStr" label="性别" width="80">
            </el-table-column>
            <el-table-column property="schoolName" label="学校名称" show-overflow-tooltip/>
            <el-table-column property="code" label="学籍号" show-overflow-tooltip/>
            <el-table-column property="idCard" min-width="300" label="身份证号" show-overflow-tooltip/>
          </el-table>
 
<!-- 按钮绑定打印 -->
 <el-button type="primary"  v-print="{popTitle:'综评报告管理',id: 'printDiv'}">打印</el-button>

4.参数配置

js 复制代码
//这里是打印的配置项
const  print=ref({
        id: 'printBox',//这里的id就是上面我们的打印区域id,实现指哪打哪
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
        preview: false, // 是否启动预览模式,默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
        zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
        previewBeforeOpenCallback() { console.log('正在加载预览窗口!'); }, // 预览窗口打开之前的callback
        previewOpenCallback() { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
        beforeOpenCallback() { console.log('开始打印之前!') }, // 开始打印之前的callback
        openCallback() { console.log('执行打印了!') }, // 调用打印时的callback
        closeCallback() { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() { console.log('点击v-print绑定的按钮了!') },
 
      })
相关推荐
cgsthtm14 小时前
RuoYi.Net后端返回雪花ID前端精度丢失问题
oracle·vue·精度丢失·雪花id·ruoyi.net
玩代码17 小时前
使用 nvm(Node Version Manager) 高效管理Node.js
node.js·vue·nvm
bdawn1 天前
Vue3 项目首屏加载性能优化全攻略
性能优化·vue·策略·分包
Orange_sparkle1 天前
若依使用基本步骤
java·vue
肖祥2 天前
uni-app x封装request,统一API接口请求
vue
阿喵派我来抓鱼2 天前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
Ciito2 天前
查看Vue项目当前的Vue CLI版本号
vue
肖祥3 天前
uni-app x使用uview-plus
vue
dcloud_jibinbin3 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue