vue 前端实现无感打印不预览打印
要实现无感打印且不预览打印，可以通过调用浏览器的打印功能并传递打印参数来实现。以下是一个使用Vue实现无感打印的示例：
<template>
<div>
<!-- 打印按钮 -->
<button @click="print">打印</button>
</div>
</template>
<script>
export default {
methods: {
print() {
// 创建一个隐藏的iframe元素
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
// 加载打印页面
iframe.contentDocument.write('<html><head><title>Print</title></head><body>' + this.$el.innerHTML + '</body></html>');
iframe.contentDocument.close();
// 调用浏览器的打印功能
iframe.contentWindow.print();
// 移除iframe
setTimeout(() => {
document.body.removeChild(iframe);
}, 100);
}
}
}
</script>
在上面的示例中，我们在Vue的组件中添加了一个打印按钮，并通过print方法来实现无感打印。当点击打印按钮时，会创建一个隐藏的iframe元素，并将当前组件的内容写入iframe的文档中。然后调用浏览器的打印功能打印iframe中的内容。最后，等待一段时间后移除iframe元素。
需要注意的是，由于浏览器的安全限制，只有用户触发的事件才能调用打印功能，所以需要在用户点击按钮时调用打印方法
原文地址: https://www.cveoy.top/t/topic/i1M9 著作权归作者所有。请勿转载和采集!