VUE调用打印机打印页面(VUE3版)
之前有个VUE2版的实现方法：
VUE调用打印机打印页面_vue调用一体式打印机-CSDN博客
因为项目需要，现在要搞一个VUE3版的
大致的需求是：通过点击一个按钮，弹出一个对话框，然后对话框上有个打印按钮，点了后，会把需要打印的内容通过调用本地的打印机打印出来。
（吐槽一下那个AI啊，折腾了两个小时，一直离成功差那么一点点，让我装这个插件那个插件的。后来只能自己现学现用把代码改出来了。所以说人工智能顶替程序员的事不太靠谱。）
实现的方法：
1.先做一个print.js
export default {
mounted(el, binding) {
const content = binding.value;
console.log(`打印内容: ${content}`);
// 执行实际的打印逻辑
}
};2.在man.js里注册一下
import printDirective from './directives/print'; // 确保路径正确
app.directive('print', printDirective);
3.在页面里调用
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的部分
// 对话框状态
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，如果用谷歌浏览器打开，就完全没这个问题。
原文地址：https://blog.csdn.net/lsjackson13/article/details/142960451
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！