Printing reactjs component in a thermal printer

Raul Beltrame — Tue, 07 May 2024 12:39:17 +0000

I'm developing the management part of a delivery system and i am trying to generate a and print in a thermal printer the customers asks. Most of the users will be restaurants, so i wish i could print it without those dialog boxes just when i click in a button to 'print' to avoid an exausting work when they have a lot of asks.

I can generate the pdf correctly, but it is not printing right. Thats what i've tryied:

function Relatorio(props){

useEffect(() => {
    const element = document.getElementById('wrap-relatorio-pedido'); 
    const opt = {
        margin: 5,
        filename: `pedido #${props.nbl_num_nota}.pdf`,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a6', orientation: 'portrait' }
    };

    //first attempt
    // html2pdf().from(element).set(opt).outputPdf('arraybuffer').then((pdf) => {
    //     const blob = new Blob([pdf], { type: 'application/pdf' });
    //     const blobUrl = URL.createObjectURL(blob);

    //     const iframe = document.createElement('iframe');
    //     iframe.style.display = 'none';
    //     iframe.src = blobUrl;
    //     document.body.appendChild(iframe);

    //     iframe.onload = () => {
    //         iframe.contentWindow.print();
    //         document.body.removeChild(iframe);
    //         URL.revokeObjectURL(blobUrl);
    //     };
    // });


    //second attempt
    // var req = new XMLHttpRequest();
    // req.onload = function (event) {
    //     var blob = new Blob([req.response], {type: 'application/pdf'}); //this make the magic
    //     var blobURL = URL.createObjectURL(blob);

    //     const iframe =  document.createElement('iframe'); //load content in an iframe to print later
    //     document.body.appendChild(iframe);

    //     iframe.style.display = 'none';
    //     iframe.src = blobURL;
    //     iframe.onload = function() {
    //       setTimeout(function() {
    //         iframe.focus();
    //         iframe.contentWindow.print();
    //       }, 1);
    //     };
    // };

    html2pdf().from(element).set(opt).save();

}, [props.nbl_num_nota]);

const space = ' '; // adiciona espaçamento em spans

const data = new Date(props.nbl_dat_emissao);

// Formatar a data no formato dd/mm/yyyy
const dataFormatada = `${('0' + data.getDate()).slice(-2)}/${('0' + (data.getMonth() + 1)).slice(-2)}/${data.getFullYear()}`;

// Formatar a hora no formato hh:mm
const horaFormatada = `${('0' + data.getHours()).slice(-2)}:${('0' + data.getMinutes()).slice(-2)}`;

return <>
    <div className='d-flex justify-content-between pedido ps-2 pt-3 pb-1' id='body-relatorio-pedido'>
        <div className='row pt-4' id='wrap-relatorio-pedido'>
            //content
        </div>
    </div>
</>
}

I don't know if it is possible due to the browser security and i have alredy tryied to the other similar question's solutions... so if anyone know how to do it or can answer if it is possible or not would help a lot.

DEV Community: Raul Beltrame

Printing reactjs component in a thermal printer