首页 >web前端 >js教程 >打印 HTML 最佳技术与样本收据。

打印 HTML 最佳技术与样本收据。

Susan Sarandon原创: 2025-01-10 22:34:421024浏览

Printing HTML best technique with sample receipt.

我一直在尝试使用 Javascript 和 Tailwindcss 打印发票。经过多次尝试和错误后，以下是我发现获得最佳结果的最佳配置。

（可选）配置 Tailwindcss

如果您使用 tailwindcss 来设计发票样式，那么您可以设置以下配置来访问“print”和“screen”前缀，您可以使用它们根据您的要求隐藏/显示内容。

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

现在您可以按如下方式使用它：

<div>



<h2>
  
  
  Add this to your primary CSS file
</h2>



<pre class="brush:php;toolbar:false">/* This will hide the extra header and footer contents added by the browser. */
@media print {
    @page {
        margin: 0.3in 0.7in 0.3in 0.7in !important;
    }
}

/* Change this as you like */
@media screen {
    html,
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: auto;
        background-color: #982b44;
    }
}

始终使用单独的路线，不要使用弹出窗口。

另外，设置文档标题以获得更好的体验。

<head>
    ...
    <title>your-file-name</title>
    ...
</head>

或

document.title = "your-file-name"

如果您要循环访问如下所示的项目，请使用 join('') 隐藏不必要的逗号。

const tableRows = orders.map((item, index) => {
    // ...
    return `
    <tr>



<p>and display this as,<br>
</p>

<pre class="brush:php;toolbar:false"><tbody>
    ${tableRows.join('')}
</tbody>

收据样本

导出函数收据生成器（卖家：任何，订单：任何）：字符串{
    const panNum = 'XXXXXXXX';
    const companyLogo = // 您的公司徽标
    const DeliveryAddr = order.deliveryAddress;

    让增值税= 0.0；
    让小计 = 0;
    让货币=''；
    const tableRows = order.items.map((item, index) => {
        // ...
        返回`
            <tr>



<p>希望这有帮助！我花了两天时间才把这个做到完美！</p>


          

            
        </tr>

以上是打印 HTML 最佳技术与样本收据。的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html print String if for const using map function this tr Access

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Different Ways to Fetch Data from APIs Using `useEffect` in React下一篇：Role-Based Authentication in MERN Stack: A Complete Guide

查看更多