Vue 项目中实现打印功能：基于目标 ID 的便捷打印方案
一、引言
在 Vue 项目开发中，实现打印功能是一个常见的需求。本文将介绍如何封装一个打印方法，使得用户只需传入需要打印的目标 ID 名称，即可轻松实现预览并打印的功能。这种方法不仅简单易用，还具有一定的通用性，适合在各种 Vue 项目中应用。完整项目代码：https://gitcode.com/Jiaberrr/vue3-pc-template/overview，演示地址：https://env-00jxt0stsnl3-static.normal.cloudstatic.cn/
二、代码实现思路
1. 确保 DOM 加载完成
在printToPdf函数中，首先检查document.readyState是否为loading。如果是，说明 DOM 尚未完全加载，此时需要监听DOMContentLoaded事件，在事件触发后执行打印操作。如果document.readyState不是loading，则可以直接执行打印操作。
2. 获取目标元素
在performPrint函数中，通过document.getElementById方法获取传入的目标 ID 对应的元素。如果未找到该元素，则在控制台输出错误信息并返回。
3. 克隆目标元素
为了避免对原页面布局产生影响，克隆目标元素及其子元素。同时，为克隆元素设置宽度为320mm，这可以根据实际需求进行调整。
4. 隐藏和显示元素
在打印之前，需要隐藏页面上的其他元素，只显示需要打印的内容。通过beforeprint事件监听，在打印前将id为app的元素隐藏，并将克隆的元素添加到body中。在打印完成后，通过afterprint事件监听，将克隆的元素从body中移除，并恢复id为app的元素的显示。
5. 触发打印
通过window.print()方法触发浏览器的打印功能。
6. 移除事件监听器
在打印完成后，移除beforeprint和afterprint事件监听器，避免重复触发。
三、代码实现
function printToPdf(targetId) {
// 确保DOM已完全加载
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () {
performPrint(targetId);
});
} else {
performPrint(targetId);
}
}
function performPrint(targetId) {
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error('Element with ID'+ targetId +'not found.');
return;
}
// 克隆目标元素及其子元素
const clonedElement = targetElement.cloneNode(true);
clonedElement.style.width = '320mm'
// 在打印之前隐藏所有元素
function hideAllElements() {
document.getElementById('app').style.display = 'none'
// 将克隆的元素添加到body中
document.body.appendChild(clonedElement);
}
// 在打印结束后恢复所有元素
function showAllElements() {
document.body.removeChild(clonedElement);
document.getElementById('app').style.display = ''
}
// 添加事件监听器以在打印之前和之后执行操作
window.addEventListener('beforeprint', hideAllElements);
window.addEventListener('afterprint', showAllElements);
// 触发打印
window.print();
// 打印完成后移除事件监听器
window.removeEventListener('beforeprint', hideAllElements);
window.removeEventListener('afterprint', showAllElements);
}
// 调用函数
export default printToPdf
四、使用方法
在 Vue 项目中使用该打印方法非常简单。首先，确保在需要使用的组件中引入该方法：
import printToPdf from '@/path/to/printToPdf.js'; // 根据实际路径引入
然后，在需要触发打印的地方调用该方法，并传入需要打印的目标元素的 ID：
export default {
methods: {
printContent() {
printToPdf('target-id'); // 将'target-id'替换为实际的目标ID
}
}
}
在模板中，可以添加一个按钮来触发打印操作：
<template>
<div>
<button @click="printContent">打印</button>
</div>
</template>
五、总结
通过上述方法，我们成功地在 Vue 项目中封装了一个便捷的打印功能。用户只需传入目标 ID，即可实现对特定元素的打印预览和打印操作。这种方法具有良好的可扩展性和维护性，可以根据项目的具体需求进行进一步的优化和定制。希望本文能对大家在 Vue 项目中实现打印功能有所帮助。
六、注意事项
- 由于不同浏览器对打印的支持和样式渲染可能存在差异，在实际应用中需要在多种浏览器上进行测试，确保打印效果符合预期。
- 如果需要打印的内容包含复杂的样式和布局，可能需要对克隆元素的样式进行进一步的调整和优化，以保证打印效果的准确性。
- 这种方法目前只是简单地隐藏了
id为app的元素，如果页面结构较为复杂，可能需要隐藏更多的元素或者对元素进行更精细的处理，以确保打印内容的纯净性。