element-plus弹窗 vue3 ts print-js 实现浏览器打印

2023-12-03 16:04:35 阅读：323 来源： 互联网

标签：

要在 Vue 3 和 TypeScript 中使用 Element Plus 弹窗并实现浏览器打印功能，你可以结合使用 el-dialog 组件和 print-js 库。下面是一个示例：

首先，确保已按照 Element Plus 文档中的指引安装和配置了 Element Plus。

然后，在需要弹窗和打印的组件中，你可以使用 el-dialog 组件创建一个对话框，并在打印时调用 printJS 函数。例如，假设你有一个名为 PrintButton.vue 的组件，其中包含了触发弹窗和打印的按钮：

<template>
  <div>
    <el-button @click="openPopup">Open Popup</el-button>

    <el-dialog
      v-model="popupVisible"
      title="Popup Title"
      :visible.sync="popupVisible"
      @close="closePopup"
    >
      <!-- 弹窗内容 -->
      <p>This is the content of the popup.</p>

      <!-- 可选的按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePopup">Cancel</el-button>
        <el-button type="primary" @click="print">Print</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import printJS from 'print-js'

export default defineComponent({
  setup() {
    const popupVisible = ref(false)

    function openPopup() {
      popupVisible.value = true
    }

    function closePopup() {
      popupVisible.value = false
    }

    function print() {
      printJS({
        printable: 'printable-content', // 需要打印的元素的 ID 或选择器
        type: 'html',
        targetStyles: ['*'], // 打印时应用的样式
        onAfterPrint: closePopup, // 打印后关闭弹窗
      })
    }

    return {
      popupVisible,
      openPopup,
      closePopup,
      print,
    }
  },
})
</script>

<style scoped>
.dialog-footer {
  padding-top: 10px;
  text-align: right;
}
</style>

Vue

在上面的示例中，我们先使用 el-button 组件创建一个按钮，并使用 @click 事件监听器来触发 openPopup 方法，从而打开对话框。

在 el-dialog 组件中，设置了标题 title、双向绑定 popupVisible 以控制对话框的显示和隐藏，并在 @close 事件中调用 closePopup 方法以确保在关闭对话框时对 popupVisible 重新赋值为 false。

在对话框的内容部分，我们添加了一个简单的 <p> 元素作为示例内容，并在底部添加了两个按钮，分别是 "Cancel" 和 "Print"。点击 "Print" 按钮时，我们调用了 printJS 函数来执行打印操作。可以根据实际情况将其中的 "printable-content" 替换为你要打印的具体元素的 ID 或选择器。

在 printJS 函数的选项中，我们指定了要打印的元素、打印类型为 "html"、应用的样式为所有的 targetStyles，并在打印后通过 onAfterPrint 回调函数关闭了弹窗。

在 setup 函数中，我们创建了一个名为 popupVisible 的响应式数据，用于控制弹窗的显示状态。然后，我们定义了 openPopup、closePopup 和 print 三个方法，分别用于打开弹窗、关闭弹窗和执行打印操作。

最后，记得在入口文件（例如 main.ts）中导入并使用 Element Plus、Vue 3 和 print-js：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import printJS from 'print-js'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

TypeScript

请根据你的实际项目结构和需求进行相应的调整。这只是一个简单的示例，希望能够帮助你结合 Element Plus 弹窗和 print-js 实现浏览器打印功能。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

element-plus弹窗 vue3 ts print-js 实现浏览器打印