The downloaded files of my program are empty

Simple put exactly what the title says.

The program should receive a number and then generate as many tables as the given number.

The program is able to generate the tables correctly, but when I try to download them, they are empty.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

window.jsPDF = window.jspdf.jsPDF;
function criarTabelas() {
var container = document.getElementById("container");
container.innerHTML = ""; // Limpar o conteúdo anterior do container
var repeticoes = parseInt(document.getElementById("repeticoes").value, 10) || 0; // Valor inserido pelo usuário
for (var i = 0; i < repeticoes; i++) {
var div = document.createElement("div");
div.className = "tabelaBingo";
var tabela = document.createElement("table");
tabela.innerHTML = "<caption>Tabela de Bingo de Genes " + (i + 1) + "</caption>";
for (var j = 0; j < 4; j++) {
var resultados;
if (j === 0) {
resultados = gerarValorAleatorio(combinacoes1);
} else if (j === 1) {
resultados = gerarValorAleatorio(combinacoes2);
} else if (j === 2) {
resultados = gerarValorAleatorio(combinacoes3);
} else if (j === 3) {
resultados = gerarValorAleatorio(combinacoes4);
}
var tr = document.createElement("tr");
tabela.appendChild(tr);
for (var k = 0; k < 4; k++) {
var valor = resultados[k];
var td = document.createElement("td");
td.textContent = valor;
tr.appendChild(td);
}
}
div.appendChild(tabela);
container.appendChild(div);
}
}
var combinacoes = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG", "CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG", "AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG", "GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];
var combinacoes1 = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG"];
var combinacoes2 = ["CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG"];
var combinacoes3 = ["AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG"];
var combinacoes4 = ["GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];
function gerarValorAleatorio(valores) {
var temp = valores.slice();
var valoresAleatorios = [];
for (var i = 0; i < 4; i++) {
var indice = Math.floor(Math.random() * temp.length);
valoresAleatorios.push(temp[indice]);
temp.splice(indice, 1);
}
return valoresAleatorios;
}
function CriaPDF() {
var tabelaBingo = document.getElementsByClassName("tabelaBingo");
for (var i = 0; i < tabelaBingo.length; i++) {
var tabela = tabelaBingo[i];
var doc = new jsPDF(); // Criar um novo documento PDF
// Converter a tabela em HTML para uma string de conteúdo
var htmlString = new XMLSerializer().serializeToString(tabela);
// Definir as opções de estilo para a tabela
var style = "<style>table { width: 100%; font-size: 12px; } th, td { padding: 5px; }</style>";
// Concatenar o estilo e o conteúdo da tabela
var content = style + htmlString;
// Adicionar o conteúdo convertido ao documento PDF
doc.html(content);
// Salvar o PDF com o nome adequado
doc.save("bingo" + (i + 1) + ".pdf");
}
}

<!-- language: lang-css -->

table {
width: 700px;
height: 500px;
font: 17px Calibri;
margin-bottom: 20px;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}

<!-- language: lang-html -->

<h1>Tabelas de Bingo</h1>
<label for="repeticoes">Número de Repetições:</label>
<input type="number" id="repeticoes" value="3">
<button onclick="criarTabelas()">Gerar Tabelas</button>
<button onclick="CriaPDF()">Baixar PDF</button>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.1/purify.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<!-- end snippet -->

This generate the files just right but the moment I download and open then they are empty.
By the way the rumblings in the code are portuguese

I have tried using the librarys suggested and followed the instructions but still there is this single problem of the tables being empty when I download then

The issue with your code lies in the way you're trying to convert the HTML table into a PDF using jsPDF. The doc.html() method you're using is not a valid method in jsPDF. Instead, you can use the html2canvas library to capture the HTML content as an image and then add that image to the PDF.
I edited the code and put it in a txt file(link below) and it should work fine now.

<!DOCTYPE html>
<html>
<head>
<title>Tabelas de Bingo</title>
<style>
table {
width: 700px;
height: 500px;
font: 17px Calibri;
margin-bottom: 20px;
}
table, th, td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.1/purify.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<script>
window.jsPDF = window.jspdf.jsPDF;
function criarTabelas() {
var container = document.getElementById("container");
container.innerHTML = ""; // Limpar o conteúdo anterior do container
var repeticoes = parseInt(document.getElementById("repeticoes").value, 10) || 0; // Valor inserido pelo usuário
for (var i = 0; i < repeticoes; i++) {
var div = document.createElement("div");
div.className = "tabelaBingo";
var tabela = document.createElement("table");
tabela.innerHTML = "<caption>Tabela de Bingo de Genes " + (i + 1) + "</caption>";
for (var j = 0; j < 4; j++) {
var resultados;
if (j === 0) {
resultados = gerarValorAleatorio(combinacoes1);
} else if (j === 1) {
resultados = gerarValorAleatorio(combinacoes2);
} else if (j === 2) {
resultados = gerarValorAleatorio(combinacoes3);
} else if (j === 3) {
resultados = gerarValorAleatorio(combinacoes4);
}
var tr = document.createElement("tr");
tabela.appendChild(tr);
for (var k = 0; k < 4; k++) {
var valor = resultados[k];
var td = document.createElement("td");
td.textContent = valor;
tr.appendChild(td);
}
}
div.appendChild(tabela);
container.appendChild(div);
}
}
var combinacoes = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG", "CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG", "AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG", "GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];
var combinacoes1 = ["UUU", "UUC", "UUA", "UUG", "UCU", "UCC", "UCA", "UCG", "UAU", "UAC", "UAA", "UAG", "UGU", "UGC", "UGA", "UGG"];
var combinacoes2 = ["CUU", "CUC", "CUA", "CUG", "CCU", "CCC", "CCA", "CCG", "CAU", "CAC", "CAA", "CAG", "CGU", "CGC", "CGA", "CGG"];
var combinacoes3 = ["AUU", "AUC", "AUA", "AUG", "ACU", "ACC", "ACA", "ACG", "AAU", "AAC", "AAA", "AAG", "AGU", "AGC", "AGA", "AGG"];
var combinacoes4 = ["GUU", "GUC", "GUA", "GUG", "GCU", "GCC", "GCA", "GCG", "GAU", "GAC", "GAA", "GAG", "GGU", "GGC", "GGA", "GGG"];
function gerarValorAleatorio(valores) {
var temp = valores.slice();
var valoresAleatorios = [];
for (var i = 0; i < 4; i++) {
var indice = Math.floor(Math.random() * temp.length);
valoresAleatorios.push(temp[indice]);
temp.splice(indice, 1);
}
return valoresAleatorios;
}
function CriaPDF() {
var tabelaBingo = document.getElementsByClassName("tabelaBingo");
var promises = []; // Array to store promises for each table capture
for (var i = 0; i < tabelaBingo.length; i++) {
var tabela = tabelaBingo[i];
var promise = html2canvas(tabela).then(function (canvas) {
var imgData = canvas.toDataURL("image/png");
var doc = new jsPDF(); // Criar um novo documento PDF
// Define the dimensions of the PDF page according to the captured image
var imgWidth = 210; // A4 page width in mm
var imgHeight = canvas.height * imgWidth / canvas.width;
// Add the captured image to the PDF
doc.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
// Save the PDF with the appropriate name
doc.save("bingo" + (i + 1) + ".pdf");
});
promises.push(promise);
}
// Wait for all promises to resolve
Promise.all(promises).then(function () {
console.log("PDFs generated successfully.");
});
}
</script>
<h1>Tabelas de Bingo</h1>
<label for="repeticoes">Número de Repetições:</label>
<input type="number" id="repeticoes" value="3">
<button onclick="criarTabelas()">Gerar Tabelas</button>
<button onclick="CriaPDF()">Baixar PDF</button>
<div id="container"></div>
</body>
</html>