htmlプリント関連操作と実装の詳細

// Sample 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 that the images are brought in as img */
        ifElement.onload = () => {
            content.print()
        }
    }
    this.getDetailTable()

    if (ifElement) {
        // If it is already created, print it directly
        addHtmlPrint()
    } else {
        ifElement = document.createElement('iframe')
        ifElement.setAttribute('id', 'ifId')
        ifElement.setAttribute('style', 'display:none')
        document.body.appendChild(ifElement)

        addHtmlPrint()
    }
}

@media print{
    /* Here the elements that don't need to be printed are set to not show */
    .hidden-element{
        display:none;
        /* visibility:hidden; */
    }
    /* The paper is set to 1200px wide by 800px high */
    @page{
        size:1200px 800px;
    }
}