cesarvr / pdf-generator

Cordova plugin to generate pdf in the client-side
MIT License
106 stars 62 forks source link

PDF font changes with Mobile font size #138

Open weversong2 opened 2 years ago

weversong2 commented 2 years ago

Hello friends.

I have been using the pdf generator plugin for a long time and it has helped me a lot.

But recently I have had some problems when the user changes the font size of the cell phone.

it happens that the pdf suffers with the change. When phone font increases, pdf font also increases and this causes layout clipping.

As for the app, I used the phonegap-plugin-mobile-accessibility plugin to ignore the Mobile Font changes and it worked. But still the source of the pdf when generated suffers from the changes.

follow my source below.

function PDFGenerator(fileName, folder, pdfhtml_conteudo, div_return) {

var fileName = fileName;

var options = {
    documentSize: 'A4',
    type: 'base64'
};

var pdfhtml = pdfhtml_conteudo;

pdf.fromData(pdfhtml, options)
        .then(function (base64) {
            // To define the type of the Blob
            var contentType = "application/pdf";
            // if cordova.file is not available use instead :
            //var folderpath = "file:///storage/emulated/0/Download/"; //PASTA Download Armazenamento Interno
            //var folderpath = cordova.file.externalRootDirectory + "/" + folder + ""; //PASTA Download Armazenamento Interno
            //var folderpath = cordova.file.applicationDirectory + "/arquivos_pdf/" ; //PASTA www/app
            if (Device_Type === 1) {
                var folderpath = cordova.file.externalDataDirectory; //PASTA 'Android/data/com.eptusrondonia.einstein_sales/files/einstein_sales.db
            } else {
                var folderpath = cordova.file.tempDirectory; //PASTA TEMP IOS
            }

            savebase64AsPDF(folderpath, fileName, base64, contentType, div_return);
        })
        .catch((err) => alert(err));

}

pdfhtml_conteudo = `

proposta.php
<BODY>
    <DIV id="page_1">
        <DIV id="p1dimg1">
            <IMG src="${returnUSER.sf_logo}" id="p1img1">
        </DIV>

        <DIV class="dclr"></DIV>
        <DIV id="id1_1">
            <P class="p0 ft0">${returnUSER.sf_nome_empresa}</P>
            <P class="p1 ft1">${returnUSER.sf_endereco_empresa}, ${returnUSER.sf_endereco_numero_empresa}- ${returnUSER.sf_bairro_empresa}, ${returnUSER.sf_cidade_empresa} - ${returnUSER.sf_uf_empresa}-${returnUSER.sf_cep_empresa}</P>
            <P class="p2 ft1">Telefone: ${returnUSER.sf_fone_funcionario} E-Mail: ${returnUSER.sf_email_funcionario}</P>
            <P class="p3 ft1">CNPJ: ${returnUSER.sf_cnpj_empresa} IE: -</P>
            <TABLE cellpadding=0 cellspacing=0 class="t0">
                <TR>
                    <TD class="tr0 td0"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr0 td1"><P class="p5 ft3">Emissão: ${formatDate(returnCLIENTE.pedido_data)}</P></TD>
                </TR>
                <TR>
                    <TD class="tr1 td0"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr1 td1"><P class="p5 ft1">Op: ${returnUSER.sf_nome_funcionario}</P></TD>
                </TR>
                <TR>
                    <TD class="tr2 td0"><P class="p4 ft1">Sistema EPTUS - Einstein Sales</P></TD>
                    <TD class="tr2 td1"><P class="p4 ft1">Pedido Nº ${id_sf_pedcab} | ${returnCLIENTE.nome_ocorrencia}</P></TD>
                </TR>
            </TABLE>
            <P class="p6 ft3">_____________________________________________________________________________________________________________</P>
            <TABLE cellpadding=0 cellspacing=0 class="t1">
                <TR>
                    <TD colspan=3 class="tr3 td2"><P class="p7 ft3">Data de Validade:</P></TD>
                    <TD colspan=2 class="tr4 td3"><P class="p8 ft4">${adicionarDiasDataProposta(7, returnCLIENTE.pedido_data)}</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td5"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td10"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr3 td11"><P class="p9 ft3">Faturado:</P></TD>
                    <TD class="tr3 td12"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr4 td13"><P class="p10 ft4">${returnCLIENTE.fatura_no_documento}</P></TD>
                </TR>
                <TR>
                    <TD colspan=2 class="tr3 td14"><P class="p7 ft3">Cliente:</P></TD>
                    <TD class="tr3 td15"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr4 td3"><P class="">${returnCLIENTE.nome_cliente}</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td5"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td10"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr3 td11"><P class="p9 ft3">Codigo:</P></TD>
                    <TD class="tr3 td12"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr4 td13"><P class="p10 ft3">${returnCLIENTE.id_cliente}</P></TD>
                </TR>
                <TR>
                    <TD colspan=3 class="tr5 td2"><P class="p7 ft3">CFP/CNPJ:</P></TD>
                    <TD colspan=2 class="tr3 td3"><P class="p5 ft3">${returnCLIENTE.cpf_cnpj}</P></TD>
                <TD class="tr3 td4"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td5"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td4"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td16"><P class="p4 ft2">&nbsp;</P></TD>
                <TD colspan=2 class="tr5 td17"><P class="p4 ft5">Inscrição Estadual:</P></TD>
                <TD class="tr3 td9"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td18"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td19"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td20"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td21"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td22"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=3 class="tr3 td2"><P class="p7 ft3">Endereço:</P></TD>
                    <TD colspan=7 class="tr4 td24"><P class="">${returnCLIENTE.endereco} ${returnCLIENTE.end_numero}, ${returnCLIENTE.bairro}, ${returnCLIENTE.cidade} - ${returnCLIENTE.estado} CEP: ${returnCLIENTE.cep}</P></TD>
                <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td18"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td19"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td20"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td21"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td22"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=2 class="tr3 td14"><P class="p7 ft6">Telefone:</P></TD>
                    <TD class="tr3 td15"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td25"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td26"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr3 td27"><P class="p5 ft3">E-Mail:</P></TD>
                <TD class="tr3 td28"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td18"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td19"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td20"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td21"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td22"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=3 class="tr3 td2"><P class="p7 ft3">Vendedor:</P></TD>
                    <TD colspan=2 class="tr4 td3"><P class="p5 ft3">${returnUSER.sf_nome_funcionario} </P></TD>
                <TD class="tr4 td26"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr3 td27"><P class="p5 ft3">E-Mail:</P></TD>
                <TD class="tr3 td28"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td18"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td19"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td20"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td21"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td22"><P class="p4 ft2">&nbsp;</P></TD>
                <TD class="tr4 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=4 class="tr3 td29"><P class="p7 ft3">Condições de Pagamento:</P></TD>
                    <TD class="tr4 td25"><P class="p11 ft3">${returnCLIENTE.nome_plano_pagamento}</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td5"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td18"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td19"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td21"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td22"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=3 class="tr3 td30"><P class="p7 ft3">Prazo de Entrega:</P></TD>
                    <TD class="tr3 td31"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr4 td32"><P class="">IMEDIATO - (SUJEITO CONFIRMACAO ESTOQUE/ANÁLISE FINANCEIRA)</P></TD>
                    <TD class="tr4 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td6"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td8"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td9"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td18"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td19"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td21"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td22"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr4 td23"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD colspan=3 class="tr6 td33"><P class="p7 ft3">Observações:</P></TD>
                    <TD class="tr6 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr4 td32"><P class="">${returnCLIENTE.observacao}</P></TD>
                    <TD class="tr6 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td5"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td4"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td6"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td7"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td8"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td9"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td18"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td19"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td21"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td22"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td34"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD class="tr2 td35"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=4 class="tr2 td36"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr2 td37"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr2 td38"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr2 td39"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr2 td40"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr2 td41"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr2 td42"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr2 td43"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr2 td44"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr2 td45"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
                <TR>
                    <TD class="tr3 td46"><P class="p7 ft3">Código:</P></TD>
                    <TD colspan=4 class="tr3 td47"><P class="p5 ft3">Descrição:</P></TD>
                    <TD colspan=2 class="tr3 td48"><P class="p5 ft3">Fabricante:</P></TD>
                    <TD colspan=2 class="tr3 td49"><P class="p5 ft3">Locação:</P></TD>
                    <TD class="tr3 td50"><P class="p5 ft3">Qtd:</P></TD>
                    <TD class="tr3 td51"><P class="p5 ft3">Valor Uni:</P></TD>
                    <TD class="tr3 td52"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr3 td53"><P class="p5 ft3">IPI R$</P></TD>
                    <TD colspan=2 class="tr3 td54"><P class="p5 ft3">Valor Total</P></TD>
                    <TD class="tr3 td55"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr3 td56"><P class="p5 ft3">Peso:</P></TD>
                </TR>
                ${td}
                <TR>
                    <TD class="tr6 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr7 td53"><P class="p5 ft10">Total Itens:</P></TD>
                    <TD class="tr6 td99"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td100"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr6 td101"><P class="p12 ft3">${Total_Itens.toLocaleString('pt-br', {minimumFractionDigits: 2, maximumFractionDigits: 2})} </P></TD>
                </TR>
                <TR>
                    <TD class="tr9 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr7 td102"><P class="p5 ft10">Total Peças:</P></TD>
                    <TD class="tr6 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td21"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr6 td103"><P class="p12 ft3">${Total_Pecas.toLocaleString('pt-br', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</P></TD>
                </TR>
                <TR>
                    <TD class="tr9 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr7 td102"><P class="p5 ft10">Total IPI:</P></TD>
                    <TD class="tr6 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr6 td13"><P class="p12 ft3">R$ ${Total_IPI.toLocaleString('pt-br', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</P></TD>
                </TR>
                <TR>
                    <TD class="tr9 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr7 td102"><P class="p5 ft10">Total Geral:</P></TD>
                    <TD class="tr6 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=3 class="tr6 td13"><P class="p12 ft3">R$ ${Total_Geral.toLocaleString('pt-br', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</P></TD>
                </TR>
                <TR>
                    <TD class="tr9 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr9 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr7 td102"><P class="p5 ft10">Peso Total :</P></TD>
                    <TD class="tr6 td20"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr6 td21"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD colspan=2 class="tr6 td103"><P class="p12 ft3">0.00 KG</P></TD>
                </TR>
                <TR>
                    <TD class="tr10 td95"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td76"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td90"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td96"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td97"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td78"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td98"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td91"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td82"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td83"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td104"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td105"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td106"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td107"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td108"><P class="p4 ft2">&nbsp;</P></TD>
                    <TD class="tr10 td109"><P class="p4 ft2">&nbsp;</P></TD>
                </TR>
            </TABLE>
            ${assinatua}                
        </DIV>
        <DIV id="id1_2">

        </DIV>
    </DIV>
</BODY>

`;

            PDFGenerator('Pedido_N_' + id_sf_pedcab + '.pdf', 'Download', pdfhtml_conteudo, 'return_pdfjs_pedido');

Note that the css I use directly in the html content. I tried to import like this:

var payload = _.template(pdfhtml_conteudo);

pdf.fromData(payload({css_file: cssFile}),

but I was not successful.