当前位置：首页 > JavaScript

js实现打印缩放

2026-02-03 01:23:39JavaScript

实现打印缩放的方法

在JavaScript中，可以通过CSS的@page规则或JavaScript动态调整打印内容的缩放比例。以下是几种常见的实现方式：

使用CSS @page规则

通过CSS的@page规则直接控制打印页面的缩放比例：

@page {
    size: auto;
    margin: 0;
    transform: scale(0.8); /* 缩放比例为80% */
}

此方法适用于简单的缩放需求，但部分浏览器可能不支持transform属性在@page中的使用。

动态修改CSS样式

在打印前通过JavaScript动态修改内容的CSS样式：

js实现打印缩放

function setPrintScale(scale) {
    const style = document.createElement('style');
    style.innerHTML = `
        @media print {
            body {
                transform: scale(${scale});
                transform-origin: top left;
                width: ${100 / scale}%;
                height: ${100 / scale}%;
            }
        }
    `;
    document.head.appendChild(style);
}

// 调用示例：设置为80%缩放
setPrintScale(0.8);

此方法通过动态插入CSS样式，调整打印内容的缩放比例。

使用window.print()事件监听

在打印事件触发时动态调整内容：

js实现打印缩放

window.onbeforeprint = function() {
    document.body.style.transform = 'scale(0.7)';
    document.body.style.transformOrigin = 'top left';
    document.body.style.width = '142.86%'; // 100 / 0.7
    document.body.style.height = '142.86%';
};

window.onafterprint = function() {
    document.body.style.transform = '';
    document.body.style.width = '';
    document.body.style.height = '';
};

此方法在打印前临时调整内容尺寸，打印后恢复原始状态。

使用Canvas或PDF库

如果需要更复杂的缩放控制，可以使用第三方库（如jsPDF、html2canvas）生成缩放后的内容：

html2canvas(document.body, {
    scale: 0.8 // 设置缩放比例
}).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('scaled-print.pdf');
});

此方法适合需要精确控制输出结果的场景。