使用样本收据打印 HTML 最佳技术

本文分享使用 JavaScript 和 Tailwind CSS 打印发票的最佳实践，总结了多次尝试后的经验。

Tailwind CSS 配置 (可选)

若使用 Tailwind CSS 设计发票样式，建议配置如下，以便使用 print 和 screen 前缀来控制不同媒体下的显示内容：

/** @type {import('tailwindcss').config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            screens: {
                print: { raw: 'print' },
                screen: { raw: 'screen' }
            },
            // ...
        }
    },
    plugins: []
};

使用方法：

立即学习“前端免费学习笔记（深入）”；

主 CSS 文件调整

添加以下 CSS 代码，可隐藏浏览器额外添加的页眉和页脚内容，并自定义屏幕样式：

/* 隐藏浏览器额外页眉页脚 */
@media print {
    @page {
        margin: 0.3in 0.7in 0.3in 0.7in !important;
    }
}

/* 自定义屏幕样式 */
@media screen {
    html,
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: auto;
        background-color: #982b44;
    }
}

最佳实践：独立路由，避免弹窗

为获得最佳打印体验，建议使用独立路由而非弹窗，并设置文档标题：

B2S商城系统

B2S商城系统B2S商城系统是由佳弗网络工作室凭借专业的技术、丰富的电子商务经验在第一时刻为最流行的分享式购物（或体验式购物）推出的开源程序。开发采用PHP+MYSQL数据库，独立编译模板、代码简洁、自由修改、安全高效、数据缓存等技术的应用，使其能在大浏览量的环境下快速稳定运行，切实节约网站成本，提升形象。注意：如果安装后页面打开出现找不到数据库等错误，请删除admin下的runtime文件夹和a

下载

或

document.title = "your-file-name";

处理项目循环，避免多余逗号

如果需要循环渲染项目，使用 join('') 方法连接字符串，避免多余逗号：

const tablerows = orders.map((item, index) => {
    // ...
    return `
    
            
${index + 1}.${item.name}
        
        ${quantity}${weightunit}
        ${price}
        ${item.currency} ${total}
    
    `;
});

渲染时使用：

    ${tablerows.join('')}

收据样本代码

以下是一个收据生成函数示例：

export function receiptGenerator(seller: any, order: any): string {
    const panNum = 'XXXXXXXX';
    const companyLogo = // your-company-logo
    const deliveryAddr = order.deliveryAddress;

    let vat = 0.0;
    let subTotal = 0;
    let currency = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        return `
            
                    
${index + 1}.${item.name}
                
                ${quantity}${weightUnit}
                ${price}
                ${item.currency} ${total}
            
        `;
    });
    // ... (其余代码保持不变) ...
}

希望以上信息对您有所帮助！ 作者花费两天时间优化此方案。