JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" id="download">Download PDF</button>

<div id="teste" class="col-md-12">

  <p class="lead"><strong>PROGRAMA DE PERFORMANCE DEKALB SAFRA 2018 / 2019 - TERMO DE PARTICIPAÇÃO</strong></p>
  
  <strong>Distribuidor:</strong>
  
  <div class="row termos-doc">
    <div class="col-md-12">
      
      <div class="item">
        <span>1) &nbsp;</span>Premissas para Participação no Programa
        
        <div class="sub-item">
          <span>1.1 &nbsp;</span>Está apto a participar do Programa de Performance Dekalb - Safra 2018 / 2019, daqui por diante denominado simplesmente "Programa", o Distribuidor que comercializar os seguintes produtos de fabricação da Monsanto: Sementes de Sorgo ou Milho Híbrido marca Dekalb, daqui por diante denominados "Produtos Monsanto".
        </div>
        <div class="sub-item">
          <span>1.2 &nbsp;</span>Firmar e ter vigente um Contrato de Distribuição Comercial com a Monsanto.
        </div>
        <div class="sub-item">
          <span>1.3 &nbsp;</span>Quando disponibilizado pela Monsanto e utilizado pelo Distribuidor Participante do Programa, doravante "Distribuidor Participante", através de Contrato de Licenciamento de Sistema de Informática, permitir à Monsanto o acesso e uso, a qualquer tempo, das seguintes informações que forem incluídas no Software Qi.on pelo Distribuidor Participante, ou aquelas que trafegarem pelo mesmo, doravante "Informações", relacionadas estritamente a distribuição e/ou representação comercial de produtos de fabricação e/ou comercialização da Monsanto, conforme o caso: 
          <p>
            - Previsão de vendas de Produtos por cliente ("forecast");<br/>
            - Cadastro de clientes, com nome/razão social, CPF/CNPJ, nome, telefone, área plantada para...

CSS

.termos-doc .item{padding: 4px 0}
.termos-doc .sub-item{padding: 4px 0 4px 20px;}
.termos-doc p{padding: 10px 0;display:inline-block}
.termos-doc thead th{background:black;color:white;border-color:black!important}

JavaScript

$('#download').on('click', function(){
	var source = document.querySelector('#teste');
  var pdf = new jsPDF('p', 'pt', 'letter'), margins = {
    top: 60,
    bottom: 60,
    left: 40,
    width: 540
  };
  
  console.log(pdf);

  pdf.fromHTML(
    source,
    margins.left,
    margins.top, {
      'width': margins.width
    },

    function(dispose){
      pdf.save('Test.pdf');
    }, margins);
});