The principle is to call the window.print() method, but this method can only print the entire current page, so the following solution is used to solve partial printing 1: Use iframe to inject the elements and styles that need to be printed and then call print // Example code function print () { let ifElement = document.getElementById('ifId') const addHtmlPrint = () => { const content = ifElement.contentWindow || ifElement.contentDocument content.document.body.innerHTML = this.detailTable const styleEle = document.createElement('style') /* Remove the header and footer when printing*/ styleEle.innerHTML = '@media print {@page { margin: 5mm; }}' content.document.getElementsByTagName('head')[0].appendChild(styleEle) /* Ensure that the resources in the iframe are loaded, and the image should be imported in the form of img*/ ifElement.onload = () => { content.print() } } this.getDetailTable() if (ifElement) { // If it has been created, print it directly addHtmlPrint() } else { ifElement = document.createElement('iframe') ifElement.setAttribute('id', 'ifId') ifElement.setAttribute('style', 'display:none') document.body.appendChild(ifElement) addHtmlPrint() } } 2: Use @media print to set the elements that need to be hidden when printing on the current page @media print{ /* Here, set the elements that do not need to be printed to not be displayed*/ .hidden-element{ display:none; /* visibility:hidden; */ } /*The paper is set to 1200px wide and 800px high*/ @page{ size:1200px 800px; } }
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Detailed analysis of the chmod command to modify file permissions under Linux
>>: Introduction to fourteen cases of SQL database
What is a stored procedure Simply put, it is a se...
1. Installation of MYSQL 1. Open the downloaded M...
Preface When introducing defineProperty before, I...
Preface I recently sorted out my previous notes o...
Effect: css: .s_type { border: none; border-radiu...
Official website explanation: When a component is...
Example: tip: This component is based on vue-crop...
Preface: In interviews for various technical posi...
We usually use float layout to solve the compatib...
Table of contents 1. Open the file Parameter Intr...
Enough of small talk <br />Based on the lar...
Recently, I encountered many problems when instal...
Table of contents 1.setInterval() 2.setTimeout() ...
Table of contents tool: Login scenario: practice:...
This time we set up an rtmp live broadcast server...