前端调用浏览器打印window.print()

‌window.print()‌ 是 JavaScript 中的一个方法，用于在当前窗口中打印页面内容。当调用该方法时，浏览器会弹出打印对话框，用户可以选择打印机和打印设置，然后将当前页面的内容发送给打印机进行打印。打印的内容包括当前页面的所有可见内容，如文本、图片、表格等‌。

使用方法
1‌、基本使用‌：直接调用 window.print() 方法即可弹出打印预览对话框，用户可以设置打印请求‌。
2‌、自定义样式‌：可以通过配置打印样式表（print.css）来改善打印的用户体验。在HTML文档中引入一个media="print"的样式表，这样在打印时就会应用这些样式‌。
3‌、部分内容打印‌：可以通过JavaScript动态控制哪些内容需要打印，例如隐藏不需要打印的元素，只打印部分内容‌。

<template>
    <div class="paperBox">
		需要打印的页面内容
	</div>
</template>

<script setup>
import $ from 'jquery'

function printPage() {
	// 页面中有使用文本输入框，需添加此处理，否则会不显示值
    const input = $('input');
    input.each(function() {
        $(this).attr('value', $(this).val());
    });
    const textarea = $('textarea');
    textarea.each(function() {
        $(this).text($(this).val());
    });
    
    // 对于需要打印的内容先添加至新的body
    let cardBodyContent = document.getElementsByClassName('paperBox')[0].innerHTML;
    let formContent = document.getElementsByClassName('hideText');
    if (formContent.length > 0) {
        for (let index = 0; index < formContent.length; index++) {
            let formInnerHtml = formContent[index].innerHTML;
            cardBodyContent = cardBodyContent.replace(formInnerHtml, '');
        }
    }
    document.body.innerHTML = cardBodyContent;
    window.print();
    // 打印完成或取消后关闭打印页面时，刷新页面恢复至原页面内容
    location.reload();
}
</script>

<style lang="scss">
@page{
  // 设置页面尺寸为A4纸大小
  size: auto A4 landscape;
  // 设置页面边距
  margin: 0;
  padding: 0;
  // 根据页面元素进行微调
  margin-top: -20px;
}

* {
  -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
  color-adjust: exact !important;  /*Firefox*/
}
</style>