VUE调用打印机打印页面(VUE3版)

之前有个VUE2版的实现方法:

VUE调用打印机打印页面_vue调用一体式打印机-CSDN博客

因为项目需要,现在要搞一个VUE3版的

大致的需求是:通过点击一个按钮,弹出一个对话框,然后对话框上有个打印按钮,点了后,会把需要打印的内容通过调用本地的打印机打印出来。

(吐槽一下那个AI啊,折腾了两个小时,一直离成功差那么一点点,让我装这个插件那个插件的。后来只能自己现学现用把代码改出来了。所以说人工智能顶替程序员的事不太靠谱。)

实现的方法:

1.先做一个print.js

javascript 复制代码
export default {
    mounted(el, binding) {
        const content = binding.value;
        console.log(`打印内容: ${content}`);
        // 执行实际的打印逻辑
    }
};

2.在man.js里注册一下

javascript 复制代码
import printDirective from './directives/print'; // 确保路径正确

app.directive('print', printDirective);

3.在页面里调用

html的部分

html 复制代码
    <div id="app1">
      <el-dialog v-model="dialogVisible" title="对话框" ref="dialogRef">
        <div ref="printArea">
          <p>{{ dialogContent }}</p>
          <img :src="profileImageUrl" alt="Profile Image" @load="onImageLoad" />
          <p>测试用的文字</p>
          <table>
            <tr>
              <td>1</td>
              <td>2</td>
            </tr>
          </table>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="printDialogContent">打印</el-button>
        </span>
        </template>
      </el-dialog>
      <el-button @click="showDialog">显示对话框</el-button>
    </div>

js的部分

javascript 复制代码
// 对话框状态
const dialogVisible = ref(false);

// 对话框内容
const dialogContent = ref('这是要打印的内容');

// 图片路径
const profileImageUrl = 'https://via.placeholder.com/150';

// 对话框引用
const dialogRef = ref(null);

// 打印区域引用
const printArea = ref(null);

// 图片是否已加载完成
const imageLoaded = ref(false);

// 显示对话框
const showDialog = () => {
  dialogVisible.value = true;
};

// 图片加载完成事件
const onImageLoad = () => {
  imageLoaded.value = true;
};

// 打印对话框内容
const printDialogContent = () => {
  if (dialogVisible.value && dialogRef.value && printArea.value) {
    const printElement = printArea.value;

    if (!imageLoaded.value) {
      console.warn('图片尚未加载完成,请稍后重试。');
      return;
    }

    const createPrintWindow = () => {
      const newWindow = window.open('', '_blank'); // 创建一个新的空白窗口
      if (newWindow) {
        setTimeout(() => {
          newWindow.document.write('<html><head><title>打印内容</title></head><body>');
          newWindow.document.write(printElement.innerHTML);
          newWindow.document.write('</body></html>');
          newWindow.document.close();

          // 触发打印
          newWindow.print();

          // 关闭窗口
          newWindow.close();
        }, 100); // 延迟100毫秒执行
      } else {
        console.error('无法打开新窗口');
      }
    };

    createPrintWindow();
  }
};

这里有个坑,因为主动打开窗口会被EDGE拦截,所以就延迟了100ms,如果用谷歌浏览器打开,就完全没这个问题。

相关推荐
Aomnitrix1 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
光影少年3 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI7 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆7 分钟前
网络监控状态
前端
_AaronWong12 分钟前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
Doris_202313 分钟前
Python条件判断语句 if、elif 、else
前端·后端·python
Doris_202318 分钟前
Python 模式匹配match case
前端·后端·python
森林的尽头是阳光31 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii33 分钟前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
计算机毕业设计木哥34 分钟前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计