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)</span>
        <p>Premissas para Participação no Programa</p>
      </div>
      <div class="sub-item">
        <span>1.1</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</span>Firmar e ter vigente um Contrato de Distribuição Comercial com a Monsanto.
      </div>
      <div class="sub-item">
        <span>1.3</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 milho e soja, cidade, estado, CEP,...

CSS

.termos-doc .item{list-style: none;padding: 4px 0}
.termos-doc .item span{width: 30px;display: inline-block;}
.termos-doc .sub-item{padding: 4px 0 4px 20px;}
.termos-doc p{padding: 10px 0;display:inline-block}

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);
});