如何通过TypeScript或CSS类动态修改打印标签页面尺寸？

默认全局样式已经设置了3×2英寸的打印尺寸，要在选择3×3英寸选项后切换打印尺寸，可通过以下两种方式实现：

方案一：CSS类切换 #

通过给页面根元素（如body）添加特定类，结合SCSS嵌套规则覆盖默认的@page设置。

1. 在全局styles.scss中添加类触发的打印样式：

// 默认打印尺寸：3×2英寸
@page {
    size: 3in 2in;
}

// 当body带有print-3x3类时，应用3×3英寸的打印尺寸
body.print-3x3 {
    @page {
        size: 3in 3in;
    }
}

2. TypeScript中处理打印按钮点击事件：

// 绑定到3×3英寸打印按钮的点击事件
const handle3x3Print = () => {
    // 添加类触发新的打印尺寸
    document.body.classList.add('print-3x3');
    // 调用浏览器打印功能
    window.print();
    // 打印完成后移除类，恢复默认样式
    setTimeout(() => {
        document.body.classList.remove('print-3x3');
    }, 100);
};

方案二：动态注入样式 #

直接通过TypeScript创建并插入样式标签，临时覆盖默认的@page规则。

const handle3x3Print = () => {
    // 创建动态样式标签
    const printStyle = document.createElement('style');
    // 设置3×3英寸的打印尺寸，用!important确保覆盖默认样式
    printStyle.textContent = `
        @page {
            size: 3in 3in !important;
        }
    `;
    // 将样式插入到页面头部
    document.head.appendChild(printStyle);

    // 触发打印
    window.print();

    // 打印完成后移除动态样式，避免影响后续打印
    setTimeout(() => {
        document.head.removeChild(printStyle);
    }, 100);
};

注意事项 #

• 使用setTimeout是因为window.print()是异步操作，需要等待打印对话框关闭后再恢复样式。
• 方案二中的!important用于确保动态样式优先级高于全局默认样式，避免被覆盖。

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