샘플 영수증으로 HTML 최고의 기술을 인쇄합니다.-JS 튜토리얼-php.cn

샘플 영수증으로 HTML 최고의 기술을 인쇄합니다.

Susan Sarandon

풀어 주다： 2025-01-10 22:34:42

원래의

1023명이 탐색했습니다.

Printing HTML best technique with sample receipt.

Javascript와 Tailwindcss를 사용하여 인보이스 인쇄를 실험해 왔습니다. 여러 시행착오 끝에 최적의 결과를 얻을 수 있는 최적의 구성은 다음과 같습니다.

(선택 사항) Tailwindcss 구성

tailwindcss를 사용하여 송장 스타일을 지정하는 경우 요구 사항에 따라 콘텐츠를 숨기거나 표시하는 데 사용할 수 있는 '인쇄' 및 '화면' 접두사에 액세스하도록 다음 구성을 설정할 수 있습니다.

/** @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>

로그인 후 복사

샘플 영수증

내보내기 기능 receiveGenerator(seller: any, order: any): 문자열 {
    const panNum = 'XXXXXXXX';
    const companyLogo = // 회사 로고
    const DeliveryAddr = 주문.배달주소;

    vat = 0.0으로 설정합니다.
    소계 = 0으로 놔두세요;
    통화 = '';
    const tableRows = order.items.map((item, index) => {
        // ...
        반환 `
            <tr>



<p>도움이 되었기를 바랍니다! 이것을 완벽하게 만드는 데 이틀이 걸렸습니다!</p>

로그인 후 복사

위 내용은 샘플 영수증으로 HTML 최고의 기술을 인쇄합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!