Detailed explanation of html printing related operations and implementation

Detailed explanation of html printing related operations and implementation

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;
    }
}
  • <link href="/example.css" media="print" rel="stylesheet" /> Marks the style that will be used when printing
  • Listen for print events window.addEventListener('beforeprint|| afterprint', ()=> {});

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

Recommend

Simple writing of MYSQL stored procedures and functions

What is a stored procedure Simply put, it is a se...

MySQL 5.5.27 installation graphic tutorial

1. Installation of MYSQL 1. Open the downloaded M...

How to monitor array changes in JavaScript

Preface When introducing defineProperty before, I...

Mobile web screen adaptation (rem)

Preface I recently sorted out my previous notes o...

Do you know why vue data is a function?

Official website explanation: When a component is...

Vue image cropping component example code

Example: tip: This component is based on vue-crop...

Answers to several high-frequency MySQL interview questions

Preface: In interviews for various technical posi...

How to use negative margin technology to achieve average layout in CSS

We usually use float layout to solve the compatib...

Linux system calls for operating files

Table of contents 1. Open the file Parameter Intr...

Page Refactoring Skills - Content

Enough of small talk <br />Based on the lar...

Problems with installing mysql and mysql.sock under linux

Recently, I encountered many problems when instal...

Summary of JavaScript Timer Types

Table of contents 1.setInterval() 2.setTimeout() ...

The practical process of login status management in the vuex project

Table of contents tool: Login scenario: practice:...

How to use Nginx to carry rtmp live server

This time we set up an rtmp live broadcast server...