[Dúvida] Gerar PDF em javascript

Estou com uma dúvida, ja quebrei a cabeça mas não da certo. Meu código gera uma listagem na tela e eu quero que ele gere a lista para o pdf, porem quando deixo a funcao de gerar pdf para gerar automatica, ela gera normal, agora se eu coloco para ela ser gerada por um botão vindo de um click, ela nao gera resultado algum, mesmo tendo todos os dados. Com certeza estou fazendo algo bem errado, javascript é cruel.

HTML

    <section class="bloco-listas d-none" id="lista-imprimir">
  <div class="listas" id="listas">
    <h1>Não posso esquecer</h1>
    <div class="lista-itens"></div>
  </div>
</section>
<section class="botoes d-none" id="botoesId">
  <a class="btn card-link" id="botaoPDF">Gerar PDF</a>
  <a class="btn card-link">Imprimir sem Formatação</a>
  <a class="btn card-link">Compartilhar</a>
</section>

JAVASCRIPT (Dessa forma esta dando errado)

    function mostrarBotoes() {
  let blocoListas = document.querySelector(".botoes");
  blocoListas.classList.remove("d-none");
  let botaoGeraPDF = document.querySelector("#botaoPDF");
  botaoGeraPDF.addEventListener("click", () => {
    gerarPDF();
  });
}

function gerarPDF() {
  var element = document.getElementById("lista-imprimir");
  html2pdf(element);
}

JAVASCRIPT (Dessa forma da certo)

function mostrarBotoes() {
  let blocoListas = document.querySelector(".botoes");
  blocoListas.classList.remove("d-none");
    gerarPDF();
}

function gerarPDF() {
  var element = document.getElementById("lista-imprimir");
  html2pdf(element);
}

document.addEventListener('DOMContentLoaded', (event) => { function mostrarBotoes() { let blocoListas = document.querySelector(".botoes"); blocoListas.classList.remove("d-none"); let botaoGeraPDF = document.querySelector("#botaoPDF"); botaoGeraPDF.addEventListener("click", () => { gerarPDF(); }); } function gerarPDF() { var element = document.getElementById("lista-imprimir"); html2pdf(element); } mostrarBotoes(); });