Download Direto do Conteúdo(alta qualidade) SCALE 1.5

by thvinic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<div class="dica">
    <b>Dica:</b> Tudo que você colocar dentro da área abaixo será convertido.<br>
    Ao clicar no botão, o download começa automaticamente.
  </div>

  <button id="downloadPdfBtn">Baixar PDF do Conteúdo</button>
  <button id="downloadPngBtn">Salvar PNG do Conteúdo</button>

  <div id="Conteudoconvertido" contenteditable="true">
    <h2>Edite este conteúdo!</h2>
    <p>Você pode colocar <b>qualquer coisa</b> aqui: textos, imagens, tabelas, listas, etc.</p>
    <ul>
      <li>Exemplo 1</li>
      <li>Exemplo 2</li>
    </ul>
  </div>

  <!-- Bibliotecas solicitadas -->

CSS

body { font-family: Arial, sans-serif; margin: 30px; }
    #Conteudoconvertido {
      width: 100%;
      min-height: 100px;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      background: #fff;
    }
    button {
      padding: 10px 25px;
      font-size: 16px;
      margin-right: 10px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    .dica {
      color: #b96c00;
      font-size: 13px;
      margin-bottom: 10px;
    }

JavaScript

const card = document.getElementById('Conteudoconvertido');
const SCALE = 1.5; // Aumente para 4 ou 5 se quiser ainda mais qualidade

function baixarDireto(base64, nomeArquivo) {
  const a = document.createElement('a');
  a.href = base64;
  a.download = nomeArquivo;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// PDF com alta qualidade
document.getElementById('downloadPdfBtn').addEventListener('click', () => {
  domtoimage.toPng(card, {
    quality: 1.0,
    bgcolor: '#fff',
    width: card.offsetWidth * SCALE,
    height: card.offsetHeight * SCALE,
    style: {
      transform: `scale(${SCALE})`,
      transformOrigin: 'top left'
    }
  })
    .then(function (dataUrl) {
      const { jsPDF } = window.jspdf;
      const pdf = new jsPDF({
        orientation: "portrait",
        unit: "px",
        format: [card.offsetWidth, card.offsetHeight]
      });
      pdf.addImage(
        dataUrl, 'PNG',
        0, 0,
        card.offsetWidth, card.offsetHeight,
        '',
        'NONE' // máxima qualidade, arquivo maior
      );
      const pdfData = pdf.output('dataurlstring');
      baixarDireto(pdfData, "conteudo-convertido.pdf");
    })
    .catch(function (error) {
      alert('Erro ao gerar PDF: ' + error);
    });
});

// PNG com alta qualidade
document.getElementById('downloadPngBtn').addEventListener('click', () => {
  domtoimage.toPng(card, {
    quality: 1.0,
    bgcolor: '#fff',
    width: card.offsetWidth * SCALE,
    height: card.offsetHeight * SCALE,
    style: {
      transform: `scale(${SCALE})`,
      transformOrigin: 'top left'
    }
  })
    .then(function (dataUrl) {
      baixarDireto(dataUrl, "conteudo-convertido.png");
    })
    .catch(function (error) {
      alert('Erro ao salvar PNG: ' + error);
    });
});