Como pegar os dados colocados no input pelo usuários e após clicar no bottun, transformalos em pdf automaticamente | Front-end

  //ESTÁ PEGANDO OS DADOS DO FORMULÁRIO
  function CriaPDF() {
const ValueInputCpf = document.querySelector('#inputCPF').value;
const ValueInputNome = document.querySelector('#inputNome').value;
const ValueInputEndereco = document.querySelector('#inputEndereco').value;
const ValueInputValor = document.querySelector('#inputValor').value;
const ValueInputDescricao = document.querySelector('#inputDescricao').value;
const ValueInputCidade = document.querySelector('#citySelector').value;
const date = new Date();
const ValueDate = new Intl.DateTimeFormat('pt-BR').format(date);

const Resultado1 = document.querySelector('.Resultado1');
const Resultado2 = document.querySelector('.Resultado2');
const Resultado3 = document.querySelector('.Resultado3');


Resultado1.innerHTML = `Eu, ${ValueInputNome}, inscrito no CPF ${ValueInputCpf}, com endereço na ${ValueInputEndereco} declaro ter recebido o valor de R$ ${ValueInputValor} referente a ${ValueInputDescricao}.`;
Resultado2.innerHTML = `${ValueInputCidade}, ${ValueDate}`; 
Resultado3.innerHTML = `Assinatura ${ValueInputNome}`;

}

//AQUI É ONDE O USUÁRIO COLOCA OS DADOS

    <div class="form-group py-2">
      <label for="InputNome"> <b><i class="mr-2"></i>Nome</b></label>
      <input id="inputNome" class="form-control" required type="name" placeholder="João Golçalves Infante Albuquerque">
    </div>

    <div class="form-group py-2">
      <label for="inputCPF"><b><i class="mr-2"></i>CPF</b> </label>
      <input type="text" required class="form-control" id="inputCPF" placeholder="000.000.000-00">
    </div>

    <div class="form-group py-2">
      <label for="inputEndereco"><b><i class="mr-2"></i>Endereço</b></label>
      <input type="text" required class="form-control" id="inputEndereco"
        placeholder="Rua Arminda Fernandes, 63">
    </div>

    <div class="form-group py-2">
      <label for="inputCEP"><b><i class="mr-2"></i>CEP</b></label>
      <input type="text" required class="form-control" id="inputCEP" placeholder="00000-000">
    </div>

  </div>

  <div class="col-md-6">
    <div class="form-group py-2">
      <label for="inputValor"><b><i class=" mr-2"></i>Valor</b></label>
      <input type="text" required class="form-control" id="inputValor" placeholder="00,00">
    </div>

    <div class="form-group py-2">
      <label for="inputDescricao"><b><i class="mr-2"></i>Descrição</b></label>
      <textarea class="form-control" required id="inputDescricao" cols="80" rows="2"
        placeholder="Justifique"></textarea>
    </div>

    <div class="form-group py-2">
      <div class="form-floating">
        <select class="form-select" id="stateSelector" aria-label="Estado" onchange="filterCity()">
          <option selected>Selecione o seu Estado</option>
        </select>
        <label for="floatingSelect">Estado</label>
      </div>
    </div>

    <div class="form-group py-2"> 
      <div class="form-floating">
        <select class="form-select" id="citySelector" aria-label="Cidade">
          <option selected>Selecione a sua Cidade</option>
        </select>
        <label for="floatingSelect">Cidade</label>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <div class="form-group text-center mt-5">
      <button type="submit" class="btn btn-info px-5" style="color: white;" onclick="CriaPDF(), window.print()" id="btnAceitar">Aceitar</button>
    </div>
  </div>

//AQUI É ONDE ONDE APÓS PREENCHER TUDO, IRÁ GERAR O PDF COM OS DADOS COLOCADO A CIMA

</form>