css 我正在使用javascript将一个大表格转换为pdf

我写了这个伟大的脚本，以帮助我的团队建立每周的任务分布板，我写它使用java脚本，html，和css，他们已经做了很长一段时间在纸上的铅笔。但现在我在最后阶段，我想把我的表格转换为pdf，这是我发现它很难，我做了几个测试：像转换csv到pdf格式，它并不总是给予一个很好的表，因为它是在html下。我想添加一列在表的最后备注，但我想我会尝试与它以后。现在我只是专注于pdf格式的导出。能够打印我们的表每周和挂起它，而不是铅笔和纸。

<table id="timetable">

 <body>
 <tr>
      <td>

        <link href="table.css" rel="stylesheet">
        <script src="table.js"></script>
            
    </td>

<tr>

<button onclick="exportCSV()">Export CSV</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<button onclick="exportPDF()">Export PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.77/vfs_fonts.js"></script>

    
 </body>
 
 const timetable = document.getElementById("timetable");

const days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const hours = ["7H", "13H", "20H"];

// Create table headers for days
const daysHeaderRow = document.createElement("tr");
const daysHeaderCell = document.createElement("th");
daysHeaderCell.innerHTML = "Days";
daysHeaderRow.appendChild(daysHeaderCell);
days.forEach(day => {
  const dayHeaderCell = document.createElement("th");
  dayHeaderCell.innerHTML = day;
  dayHeaderCell.colSpan = 3;
  daysHeaderRow.appendChild(dayHeaderCell);
});
timetable.appendChild(daysHeaderRow);

// Create table headers for hours
const hoursHeaderRow = document.createElement("tr");
const hoursHeaderCell = document.createElement("th");
hoursHeaderCell.innerHTML = "Hours";
hoursHeaderRow.appendChild(hoursHeaderCell);
for (let i = 0; i < days.length; i++) {
  for (let j = 0; j < 3; j++) {
    const hourHeaderCell = document.createElement("th");
    hourHeaderCell.innerHTML = hours[j];
    hoursHeaderRow.appendChild(hourHeaderCell);
  }
}
timetable.appendChild(hoursHeaderRow);

// Create row for Mina
const names = ["Khalfi","Redouani", "Daki", "Hamma", "Saadane", "Boughanem", "El Ansari","Badilou","Raoui", "Chouiba", "Dahmane", "Achdad", "Bouryal", "Ettouri", "Saadouni"];
for (let name of names) {
  const row = document.createElement("tr");
  const nameCell = document.createElement("td");
  nameCell.innerHTML = name;
  row.appendChild(nameCell);
  for (let i = 0; i < days.length; i++) {
    for (let j = 0; j < 3; j++) {
      const cell = document.createElement("td");
      const select = document.createElement("select");
      select.classList.add("cell");
      const options = [" ", "CP", "ME", "CL", "CE", "R"];
      options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option;
        optionElement.innerHTML = option;
        select.appendChild(optionElement);
      });
      cell.appendChild(select);
      row.appendChild(cell);
    }
  }
  timetable.appendChild(row);
}



function exportCSV() {
    var rows = document.querySelectorAll("#timetable tr");
    var csvData = [];
    for (var i = 0; i < rows.length; i++) {
        var rowData = [];
        var cells = rows[i].querySelectorAll("td, th");
        for (var j = 0; j < cells.length; j++) {
            const select = cells[j].querySelector("select");
            if(select){
                rowData.push(select.value);
            }else{
                rowData.push(cells[j].innerText);
            }
        }
        csvData.push(rowData);
    }
    var csv = Papa.unparse(csvData);
    var csvData = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    var csvURL =  null;
    if (navigator.msSaveBlob) {
        csvURL = navigator.msSaveBlob(csvData, 'timetable.csv');
    } else {
        csvURL = window.URL.createObjectURL(csvData);
    }
    var tempLink = document.createElement('a');
    tempLink.href = csvURL;
    tempLink.setAttribute('download', 'timetable.csv');
    tempLink.click();

    // Convert the CSV data to a PDF and download it
    
var pdf = new jsPDF('l','mm','a4');
pdf.addPage();
pdf.text(csv, 10, 10);
pdf.save('timetable.pdf');

#timetable th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
background-color: #006699; /* bleu foncé /
}
#timetable tr:nth-child(even) {
background-color: #E6E6FA; / lavande */
}

/* Mise en page globale */
body {
  background-color: #f1f1f1;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Style de la barre de navigation */
nav {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

/* Style de la section principale */
main {
  padding: 20px;
}

/* Style des titres */
h1, h2, h3 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Style des paragraphes */
p {
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Style des images */
img {
  max-width: 100%;
}

我看到你已经有pdfmaker可用的脚本，所以我们可以使用，而不是转换您的数据到pdf与，而不是。
您可以通过以下下载功能实现此目的：

function downloadPDFWithPDFMake() {
     var rows = document.querySelectorAll("#timetable tr");
     var data = [];
     for (var i = 0; i < rows.length; i++) {
       var rowData = [];
       var cells = rows[i].querySelectorAll("td, th");
       for (var j = 0; j < cells.length; j++) {
          const select = cells[j].querySelector("select");
          if(select){
            rowData.push({text: select.value, style: 'tableData'});
          }else{
            rowData.push({text: cells[j].innerText, style: 'tableData'});
          }
      }
      data.push(rowData);
    }

    var docDefinition = {
      header: { text: 'Your awesome table', alignment: 'center' },
      footer: function(currentPage, pageCount) { return ({ text: `Page ${currentPage} of ${pageCount}`, alignment: 'center' }); },
      content: [
        {
          style: 'tableExample',
          table: {
            headerRows: 1,
            body: [
            ...data
            ]
          },
          layout: {
            fillColor: function(rowIndex) {
              return (rowIndex % 2 === 0) ? '#E6E6FA' : null;
            }
          },
        },
      ],
      styles: {
        tableExample: {
          // table style
        },
        tableData: {
          // table data style
        },
      },
    };
    pdfMake.createPdf(docDefinition).download('Your awesome table');
  }

您可以通过类名对配置进行时尚化。为了获得更好的info。

css 我正在使用javascript将一个大表格转换为pdf

1条答案

相关问题

热门标签

最新问答