Como imprimir conteudo de um template gerado dinamicamente?

Front-end JavaScript
#1

Galera, criei um sisteminha de pedidos online para hamburgueria, uma landpage com o cardapio e opção de enviar o pedido pelo whatsapp. Ocorre que eu gostaria tambem de imprimir cada pedido feito.
Para mandar o pedido pelo whatsapp eu criei um metodo que percorre o carrinho de compras e cria um template conforme os itens do pedido, jogo tudo numa variavel, depois transformo numa url.
Ja tentei de tantas as formas mandar mesmo conteudo para uma mini impressora termica, usando o window.print. Tive a ideia de abrir uma pagina em branco e jogar o conteudo da variavel texto, mas ficou tudo meios desajustado, junto, numa linha só.
vejam meu metodo:

  finalizarPedido: () => {
                // primeiro validamos se o carrinho está vazio ou nao e se o endereço está preenchido

                if (meu_Carrinho.length >0 && meu_Endereco != null) {

                    var texto = 'Olá, eu gostaria de fazer um pedido,';
                    texto += `\n*Itens do Pedido:*\n\n\${itens}`; 
                    texto += '\n*Endereço de Entrega:*'; 
                    texto += `\n${meu_Endereco.endereco}, ${meu_Endereco.numero}, ${meu_Endereco.bairro}`; 
                    texto += `\n${meu_Endereco.cidade} - ${meu_Endereco.Uf} / ${meu_Endereco.cep} ${meu_Endereco.complemento}`; 
                    texto += `\n\n*Total (com entrega): R$ ${(valor_Carrinho + valor_Entrega).toFixed(2).replace('.', ',')}*`; 

                    var itens = '';

                    $.each(meu_Carrinho, (i, e ) => {

                        itens += `*${e.quantidade}x* ${e.name}........R$ ${e.price.toFixed(2).replace('.', ',')} \n`; 
                        
                        // verificando se o each chegou ao ultimo item

                        if ((i + 1) == meu_Carrinho.length) {

                            texto = texto.replace(/\${itens}/g, itens);

                     //     encodificando a variavel texto para URL do whatsapp

                         let encode = encodeURI(texto);

                       //  criando a URL 

                       //   let URL = `https://wa.me/5598970220128?text=${encode}`;

                          let URL = `https://wa.me/${celular_Empresa}?text=${encode}`;

                        //  atrubuindo o endereço URL ao href do Botao Enviar Pedido

                        $("#btnEtapaResumo").attr('href', URL);
                     }
                  });
                }
 
            },

como faço para enviar o mesmo conteudo para a impressora sem que perca a formatação ?

alguem pode me ajudar ?

#2

a formatação que vc quer é deixar em negrito?

da pra tirar todos os caracteres especiais tb:

image
image648×698 29 KB 

    let texto = `Olá, eu gostaria de fazer um pedido,
*Itens do Pedido:*
${itens}

*Endereço de Entrega:*
Avenida Paulista, 205, SP
São Paulo - SP / 12345678
*Total (com entrega): R$ ${(25).toFixed(2).replace('.', ',')}*`;

    const ret = texto.replaceAll('\*', '');
    console.log(ret);
#3

Na tela, no console, para o whatsapp está tudo certo, sai formatado do jeito que quero. Mas o que eu estou querendo é enviar para uma impressora, seja comum, termica o que for. O window.print imprime a tela e nao o conteudo que estou mandando. E mesmo assim, usando o window.print, já sai todo bagunçado. Eu gostaria de pressionar o botão e enviar para a impressao esses dados do pedido realizado. Essa é a duvida.

#4

ah, entendi. Vc pode usar o Printer;

    const printer = new Printer("<h1>Exemplo</h1>\
    <p>Ao invés de mostrar o conteúdo q tem em tela\
vai mostrar isso aq</p>");

    printer.print();
#5

Me esclarece uma coisa, todo o conteudo do pedido esta na variavel texto, que recebe alem da partica estática da mensagem, a parte dinamica, que é preenchida através dos dados buscados no each. Nesse caso eu posso fazer apenas assim :

 const printer = new Printer (texto).
printer.print();

??? Ou coloco a variavel texto na outra instrução?

const printer = new Printer ().
printer.print(texto);

Vai sair formatado ? Outra duvida, vai direito para a impressora ou abre uma nova pagina ?

#6

Acbei de testar aqui e não funcionou. Na verdade não aconteceu nada.

finalizarPedido: () => {
                // primeiro validamos se o carrinho está vazio ou nao e se o endereço está preenchido

                if (meu_Carrinho.length >0 && meu_Endereco != null) {

                    var texto = 'Olá, eu gostaria de fazer um pedido,';
                    texto += `\n*Itens do Pedido:*\n\n\${itens}`; 
                    texto += '\n*Endereço de Entrega:*'; 
                    texto += `\n${meu_Endereco.endereco}, ${meu_Endereco.numero}, ${meu_Endereco.bairro}`; 
                    texto += `\n${meu_Endereco.cidade} - ${meu_Endereco.Uf} / ${meu_Endereco.cep} ${meu_Endereco.complemento}`; 
                    texto += `\n\n*Total (com entrega): R$ ${(valor_Carrinho + valor_Entrega).toFixed(2).replace('.', ',')}*`; 

                    var itens = '';

                    $.each(meu_Carrinho, (i, e ) => {

                        itens += `*${e.quantidade}x* ${e.name}........R$ ${e.price.toFixed(2).replace('.', ',')} \n`; 
                        
                        // verificando se o each chegou ao ultimo item

                        if ((i + 1) == meu_Carrinho.length) {

                            texto = texto.replace(/\${itens}/g, itens); 

                      const printer = new Printer().
                      printer.print(texto)
#7

Não acontece absolutamente nada. Com o window pelo menos abre uma nova tela com os dados do pedido, só nao fica formatado.