首页vue2移动端打印前端实现

vue2移动端打印前端实现

时间: 2023-08-30 16:05:18 浏览: 440

在移动端打印前端实现，可以使用浏览器提供的 `window.print()` 方法来实现。同时，为了适应移动端的页面大小，需要对页面进行一些调整。下面是一个简单的实现示例： ``` <template> <div class="print-demo"> <button @click="print">打印</button> <div class="print-content">  </div> </div> </template> <script> export default { methods: { print() { const printContent = document.querySelector('.print-content') const windowWidth = document.documentElement.clientWidth const windowHeight = document.documentElement.clientHeight const printWindow = window.open('', '', `width=${windowWidth},height=${windowHeight}`) printWindow.document.write(` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打印页面</title> <style> @media print { /* 隐藏不需要打印的元素 */ body *:not(.print-content) { display: none; } } </style> </head> <body> <div class="print-content"> ${printContent.innerHTML} </div> </body> </html> `) printWindow.print() printWindow.close() } } } </script> ``` 在上面的示例中，点击“打印”按钮后，会弹出一个新窗口，并将 `print-content` 元素的内容复制到新窗口中。同时，为了适应移动端页面大小，使用 `windowWidth` 和 `windowHeight` 调整了新窗口的大小。在打印时，使用 `print()` 方法进行打印，并在打印完成后关闭窗口。同时，为了避免不需要打印的元素也被打印，使用 CSS 的 `@media print` 样式将这些元素隐藏。

阅读全文