如何在CSS文件加载完成后立即调用print()打开打印窗口？

Instead of using a fixed timeout, you can dynamically create the stylesheet link element and listen for its onload event to trigger printing only after the CSS is fully loaded. This ensures you don't wait longer than necessary, and avoids missing the load entirely.

Here's the modified code:

// Open print window
const printWindow = window.open('', 'Print', 'height=600,width=800');
printWindow.document.write('<html><head></head><body><p id="test">Hello</p></body></html>');
printWindow.document.close();

// Create stylesheet link
const styleLink = printWindow.document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = 'mystylesheet.css';
styleLink.type = 'text/css';

// Print function
function triggerPrint() {
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

// Wait for stylesheet to load
styleLink.onload = triggerPrint;

// Fallback if stylesheet fails to load
styleLink.onerror = () => {
    console.warn('Stylesheet failed to load; proceeding with print');
    triggerPrint();
};

// Add link to print window's head
printWindow.document.head.appendChild(styleLink);

Key Details: #

• Dynamic Link Creation: By creating the <link> element programmatically, we can attach a direct load listener to it, eliminating guesswork about load timing.
• Load Event: The onload event fires only when the CSS file is fully downloaded and parsed by the browser, ensuring styles are applied before printing.
• Error Fallback: The onerror handler ensures printing still proceeds if the stylesheet fails to load, preventing the print window from hanging indefinitely.

Handling Multiple Stylesheets #

If you need to load multiple CSS files, track how many have loaded and trigger print once all are done:

const printWindow = window.open('', 'Print', 'height=600,width=800');
printWindow.document.write('<html><head></head><body><p id="test">Hello</p></body></html>');
printWindow.document.close();

const stylesheets = ['mystylesheet.css', 'another-style.css'];
let loadedCount = 0;

function checkAllLoaded() {
    if (loadedCount === stylesheets.length) {
        triggerPrint();
    }
}

function triggerPrint() {
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

stylesheets.forEach(href => {
    const link = printWindow.document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    link.type = 'text/css';
    
    link.onload = () => {
        loadedCount++;
        checkAllLoaded();
    };
    
    link.onerror = () => {
        console.warn(`Failed to load ${href}`);
        loadedCount++;
        checkAllLoaded();
    };
    
    printWindow.document.head.appendChild(link);
});

内容的提问来源于stack exchange，提问作者pileup