本文分享使用 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; }}
最佳实践：独立路由，避免弹窗
为获得最佳打印体验，建议使用独立路由而非弹窗，并设置文档标题：
your-file-name
或
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}
希望以上信息对您有所帮助！ 作者花费两天时间优化此方案。
以上就是使用样本收据打印 HTML 最佳技术的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500636.html
微信扫一扫 
支付宝扫一扫 
