vue3 print ts打印组件

原创

已于 2023-12-07 14:32:59 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

于 2023-12-06 11:49:18 首次发布

本文介绍了如何在Vue3项目中安装并使用vue3-print-ts插件，提供了全局注入directive的方法，以及在ElementPlusUI中的一个打印按钮示例，展示了如何配置打印参数和事件处理函数。

依赖安装

npm install vue3-print-ts

vue3.2.*请使用v0.2.*版本；vue3.3.*请使用v0.3.*版本

全局注入

import { createApp } from 'vue'
import App from './App.vue'
import Print from 'vue3-print-ts'

const app = createApp(App)
app.directive("print", Print)

页面使用（element plus ui 例子）

<template>
  <div class="container">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://github.com/huang-long/vue3-print-ts" target="_blank">vue3-print-ts</a>
      </el-col>
    </el-row>

    <el-divider content-position="left">print</el-divider>

    <el-row :gutter="24">
      <el-button type="primary" size="small" icon="Printer" v-print="printObj">打印</el-button>
      <div id="loading" v-show="printLo