1. I consider 256 to be a nice, round number.
2. I become annoyed when 10K means 10,000.
3. I’ve written a useless program just for the “fun” of it.
4. In fact, I prefer writing useless programs.
5. I start counting from 0 and end up with one less than everyone else.
6. I write equals as == and not equals as !=.
7. I understand (0x2b||!0x2b) and find it funny.
8. I know where to find the {braces} keys without looking.
9. I call text phrases “strings.”
10. I dream in code.
11. I refer to eating and drinking as uploading.
12. I refer to using the bathroom as downloading.
13. I frequently use words like iteration, implementation, contiguous, trivial, version, array, polymorphic, parse, and WTF in casual conversations.
14. When someone asks me what languages I speak, I reply: “Python, C++, JavaScript, and Solidity.”
15. I hear the word “Scuzzy” and don’t think it’s a bad thing.
16. My favorite f-word is fdisk.
17. <rant>I include XML in regular correspondence.</rant>
18. I use camelCase for names.
19. I take things too literally.  For example, my wife gets upset when she asks “Do you want to take out the garbage?” (no) instead of “Will you take out the garbage?” (yes).
20. I respond to questions too logically.  For example, when a waitress asks me, “Would you like coffee or tea?”  I respond, “Yes.”
21. I answer negative questions in the technically-correct but awkward way.  When my mom asks me, “Wouldn’t you like a glass of milk?”  I respond, “Yes, I wouldn’t like a glass of milk.”
22. I refer to having sex as setting up a LAN!
23. When I make a mistake or say something I shouldn’t have, I wish I could press Ctrl+Z.
24. When searching a paper book, I get frustrated that I cannot simply press Ctrl+F to find the text I’m looking for.
25. When a store cashier asks me for my zip code, I demand to see the store’s privacy policy.
26. I get sudden attacks of bittersweet nostalgia when thinking about my long-lost Commodore 64, Sinclair ZX-81, TRS-80, or Amiga 1000.
27. It’s hard for me to make an absolute statement because I always consider there may be an edge case.
28. I unit-test my spouse, expecting deterministic, solid outputs for a certain input with boundary conditions.
29. I tell my spouse to “stop throwing exceptions that I’m not willing to catch.”
30. I email myself notes rather than writing them.
31. I hold a mouse more than my wife’s hand.
32. I end my sentences with a semicolon…
33. … actually not anymore since I discovered Python.
34. I assume that most people love their jobs like I do.
35. I’d rather text the guy in the next cubicle than talk to him.
36. Nighttime and sleep are no longer irrevocably linked.
37. I think these programming jokes are hilarious.
38. I think xkcd is the funniest webcomic ever.
39. I think the three primary colors are red, green and blue.
40. I have more than one monitor.
41. I have more email addresses than pairs of shoes.
42. The number of computers in my house exceeds the number of romantic relationships I’ve had in my lifetime.
43. I run a Web server at home.
44. Instead of playing games on my Xbox, I set up a Bitcoin node.
45. I carry a USB flash drive in my pocket wherever I go.
46. I know what a router is, and I know what a bit is, but I don’t know what’s a router bit.
47. I helped my grandma create her own blog.
48. I talk to my computer the way most people talk to their significant other.
49. I email myself to remind me to do something.
50. I rig up elaborate mechanisms to perform basic tasks.
51. When I’m reading a magazine and I see an underlined passage, I feel compelled to click on it.

Shout Out

This compilation is from multiple awesome online sources such as the following:

• https://www.devtopics.com/how-to-tell-if-youre-a-programmer-geek/
• Stack Overflow
• Julia Hayden
• Geeks.com
• You Might Be
• Ubuntu Forums

The jsPDF AutoTables plugin is for converting a table to a PDF. This is a dependable client-side library to generate reports online in a table format.

It has many features around the PDF generation process using this library. It supports customizing the appearance by defining table column structure and styles.

In this article, we will see the capability of this plugin and its usage with examples.

The below code shows a quick example to learn how to use the jsPDF autoTable library to convert tabular data into a PDF.

It builds the options array to specify a body, start position and more to create a PDF document. It outputs a PDF document as a result and prompts to download it to the browser.

window.onload = function() { var doc = new jsPDF('p', 'pt', 'letter') // Supply data via script var body = [ ['SL.No', 'Product Name', 'Price', 'Model'], [1, 'I-phone', 75000, '2021'], [2, 'Realme', 25000, '2022'], [3, 'Oneplus', 30000, '2021'], ] // generate auto table with body var y = 10; doc.setLineWidth(2); doc.text(200, y = y + 30, "Product detailed report"); doc.autoTable({ body: body, startY: 70, theme: 'grid', }) // save the data to this file doc.save('auto_table_with_javascript_data');

}

Basics of jsPDF Autotable

This plugin can receive two types of source formats for generating a standard PDF.

1. An array of table row data to supply via script.
2. HTML table element object to parse for converting a table to PDF.

How to integrate?

There are many ways to integrate this library into an application. Those are listed below.

• Using npm command as like npm install jspdf jspdf-autotable
• Download the plugin library from Github.
• Include jsPDF and jsPDF Autotable via CDN URL.

https://cdnjs.cloudflare.com/ajax/libs/j...umd.min.js https://cdnjs.cloudflare.com/ajax/libs/j...ble.min.js

Features

This list shows some of the widely used features of the jsPDF AutoTables plugin. Other than that, it has more features that can be found in the official documentation page.

• It provides options to set table content with html, head, body, foot, columns. The html and body are required among them.
• It provides more control over table cells and columns using CellDef and ColumnDef properties.
• It has built-in themes for tables and also allows adding custom styles.
• It provides hooks to callback on an event basis. This callback passes the hookData reference.

Database script

The below SQL script is used for having the backend data for the PDF table source. Import this SQL before running the AutoTable examples using database data to Generate PDF.

It helps to load dynamic data into the HTML table.

• This HTML source will be used as a reference with the Autotable.html property.
• This data can also be converted as a JSON object and mentioned in the Autotable.body property to Generate PDF.

structure.sql

--

-- Table structure for table `tbl_product`

-- CREATE TABLE `tbl_product` ( `id` int(11) NOT NULL, `product_name` varchar(255) NOT NULL, `price` varchar(255) NOT NULL, `model` varchar(255) NOT NULL

); --

-- Dumping data for table `tbl_product`

-- INSERT INTO `tbl_product` (`id`, `product_name`, `price`, `model`) VALUES

(1, 'GIZMORE Multimedia Speaker with Remote Control, Black', '2300', '2020'),

(2, 'Black Google Nest Mini', '3400', '2021'),

(3, 'Black Digital Hand Band, Packaging Type: Box', '1800', '2019'),

(4, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '29490', '2021'),

(5, 'JBL Airpods', '2300', '2020'),

(6, 'Black Google Nest Mini', '3400', '2021'),

(7, 'Black Digital Hand Band, Packaging Type: Box', '1800', '2019'),

(8, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '29490', '2021'); ALTER TABLE `tbl_product` ADD PRIMARY KEY (`id`); ALTER TABLE `tbl_product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

Simple HTML Table to PDF generation using jsPDF AutoTables

The PDF table data is dynamic from the database. The below code fetches the database records and display them in the UI with a HTML table.

It also shows a button to trigger the PDF generation on clicking it.

The on click event calls a JavaScript function named generateTable(). It refers to HTML table in the UI in the AutoTable.html option.

html-to-pdf-using-jspdf.php

<?php

namespace Phppot; require_once __DIR__ . '/lib/DataSource.php';

$conn = new DataSource();

$sql = "SELECT * FROM tbl_product";

$result = $conn->select($sql);

?>

<html>

<title>Product</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>

<script src="assets/js/jspdf-autotable-custom.js"></script>

<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

</head>

<body> <div class="container"> <h2 class="text-center heading">Product detailed list</h2> <table class="table" id="product-table"> <tr class="border"> <th class="text-align">SL.No</th> <th>Product Name</th> <th class="text-align">Price</th> <th class="text-align">Model</th> </tr> <?php if (! empty($result)) {?> <?php foreach ($result as $k=>$val) {?> <tr class="content border"> <td class="text-align"><?php echo $result[$k]["id"];?></td> <td class="border-dark"><?php echo $result[$k]["product_name"];?></td> <td class="text-align"><?php echo $result[$k]["price"];?></td> <td class="text-align"><?php echo $result[$k]["model"];?></td> </tr> <?php }}?> </table> <input type="button" class="export-button" on‌click="generateTable()" value="Generate PDF" /> </div>

</body>

</html>

Generate PDF from HTML table using AutoTable function

This script shows the generateTable() function and prepares the title and the table data to display in the PDF.

The autoTable() function uses the HTML table’s id selector reference to get the table data for the PDF.

Also, it fixes the PDF starting coordinates, themes and styles with the reference of the jsPDF instance.

By parsing the HTML table source, it outputs a PDF document that can be downloaded and saved.

function generateTable() { var doc = new jsPDF('p', 'pt', 'letter'); var y = 20; doc.setLineWidth(2); doc.text(200, y = y + 30, "Product detailed report"); doc.autoTable({ html: '#product-table', startY: 70, theme: 'grid', columnStyles: { 0: { halign: 'right', tableWidth: 100, }, 1: { tableWidth: 100, }, 2: { halign: 'right', tableWidth: 100, }, 3: { halign: 'right', tableWidth: 100, } }, }) doc.save('auto_table_pdf');

}

Set default theme and custom styles for PDF tables

The jsPDF AutoTable plugin provides built-in themes. The possible values are ‘stripped’, ‘grid’, ‘plain’ and ‘css’.

It also supports adding custom styles by changing the plugin’s default options.

This example uses this plugin to customize the output PDF appearance by applying exclusive styles. These styles are applied on top of the configured theme appearance.

pdf-with-plugin-theme-and-custom-styles.php

<html>

<title>Product</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>

<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

</head>

<body> <div class="container"> <input type="button" class="export-button" on‌click="setThemeCustomStyle();" value="Generate PDF" /> </div>

</body>

</html>

The autoTable sets PDF table theme as grid and applies custom styles using headStyles and columnStyles options.

The custom styles override the cell background color, height and other default settings.

function setThemeCustomStyle() { var doc = new jsPDF('p', 'pt', 'letter') // generate the above data table var body = [ [1, 'GIZMORE Multimedia Speaker with Remote Control, Black,Lorem Ipsum is simply dummy...', 75000, '2021'], [2, 'Realme', 25000, '2022'], [3, 'Oneplus', 30000, '2021'], ] // New Header and Footer Data Include the table var y = 10; doc.setLineWidth(2); doc.text(200, y = y + 30, "Product detailed report"); doc.autoTable({ body: body, startY: 70, head:[['SL.No', 'Product Name', 'Price', 'Model']], headStyles :{lineWidth: 1,fillColor: [30, 212, 145],textColor: [255,255,255], }, theme: 'grid', columnStyles: { 0: { halign: 'right', cellWidth: 50, fillColor: [232, 252, 245], }, 1: { halign: 'left', cellWidth: 380, fillColor: [232, 252, 245], }, 2: { halign: 'right', cellWidth: 50, fillColor: [232, 252, 245], }, 3: { halign: 'right', cellWidth: 50, fillColor: [232, 252, 245], } }, }) // save the data to this file doc.save('auto_table_theme_custom_styles');

}

Create a PDF table with a header and footer

When preparing reports in a tabular format, the header, and footer components are most probably required. The header is for classifying the column data with keys or categories.

The footer components’ purpose commonly depends on the type of tabular report. If the table is huge in length, the footer may duplicate the header columns. If the table contains statistical data, the footer may reflect the consolidated figures.

In this way, the header and footer give value-add to the tabular report.

This plugin gives various methods to add header and footer parts along with the table body. Two of them are taken here for implementation in the below examples.

• Using head and foot properties
• Using column properties

Using head and foot properties

The page will contain a “Generate” button to call the below JavaScript function. This function initiates autoTable and specify the following properties.

• body
• head
• foot
• headStyles
• footStyles
• columnStyles

Then, To press the export button it not only downloads the table but also shows the table along with the header footer data value that we have added.

jspdf-long-text-header-footer.php

function generateHeaderFooterTable() { var doc = new jsPDF('p', 'pt', 'letter') // generate the above data table var body = [ [1, 'GIZMORE Multimedia Speaker with Remote Control...', 75000, '2021'], [2, 'Realme', 25000, '2022'], [3, 'Oneplus', 30000, '2021'], ] // New Header and Footer Data Include the table var y = 10; doc.setLineWidth(2); doc.text(200, y = y + 30, "Product detailed report"); doc.autoTable({ body: body, startY: 70, head:[['SL.No', 'Product Name', 'Price', 'Model']], foot:[[' ', 'Price total', '130000', ' ']], headStyles :{textColor: [255, 255, 255],}, footStyles :{textColor: [255, 255, 255],}, theme: 'grid', columnStyles: { 0: {halign: 'right', cellWidth: 50,}, 1: {halign: 'left', cellWidth: 380,}, 2: {halign: 'right', cellWidth: 50,}, 3: {halign: 'right', cellWidth: 50,} }, }) ...

... // save the data to this file doc.save('auto_table_header_footer');

}

Using column properties

Using this method, it maps the data key-value pair in the body of the autoTable specification.

Then, it specifies the column name in the header with the corresponding key reference used in the body.

It allows adding styles to the table columns with the columnStyles property. In the below example, it aligns the price column data to the right by setting halign in the columnStyles.

doc.autoTable({ columnStyles: { price: { halign: 'right' } }, body: [ { s_no: '1', product_name: 'GIZMORE Multimedia Speaker with Remote Control, Black', price: '75000' }, { s_no: '2', product_name: 'Realme', price: '25000' }, { s_no: '3', product_name: 'Oneplus', price: '30000' }, ], columns: [ { header: 'SL.No', dataKey: 's_no' }, { header: 'Product Name', dataKey: 'product_name' }, { header: 'Price', dataKey: 'price' }, ],

})

Create PDF with nested data table

First, the UI will show a parent table using the below HTML code. This example will describe how to add a nested table inside this parent while generating a PDF.

The AutoTable plugin provides various callback functions. This example script uses drawCell function to insert the nested table in the callback.

It helps to add more data via JavaScript to the preliminary level of information displayed on load.

jspdf-nested-autotable.php

<html>

<title>Product</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>

<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

<script src="assets/js/jspdf-autotable-custom.js"></script>

</head>

<body> <div class="container"> <h2 class="text-center heading">Product detailed list</h2> <table class="table" id="product-table"> <tr class="content border border-dark"> <td>iPhone</td> <td>Version: 13</td> </tr> </table> <input type="button" class="export-button" on‌click="generateNestedPdf()" value="Generate PDF" /> </div>

</body>

</html>

The below script refers to the HTML table object to generate the parent table in the PDF. Then, it defines a callback to insert sub information in a child table.

This child table is inserted into a cell on a conditional basis. This condition checks the dataKey and the section attribute of the document instance. The custom styles define the cell dimension.

function generateNestedPdf() { var doc = new jsPDF(); doc.autoTable({ html: '#product-table', head: [["Product", "Specification"]], didDrawCell: function (data) { if (data.column.dataKey === 1 && data.cell.section === 'body') { doc.autoTable({ body: [ ["Model: ", "Mini"], ["Size: ", "6.2 inches"] ], startY: data.cell.y + 10, margin: { left: data.cell.x + data.cell.padding('left') }, tableWidth: 'wrap', theme: 'grid', }); } }, columnStyles: {5: {cellWidth: 40}}, bodyStyles: {minCellHeight: 30} }); doc.save('nested_table_pdf');

};

PDF tables with a horizontal page break

This example is very important and useful in a report generation application.

When the loaded table data exceeds the target PDF layer, the table has to be wrapped. It is to prevent the data from being cut off from the PDF boundary.

By enabling the horizontalPageBreak it wraps the table and displays the wrapped content on the next page.

This example shows a 9-column table that wraps the lost column on exceeding the boundary.

It also enables the horizontalPageBreakRepeat to show the mapping for wrapped content with unique column data.

jspdf-horizontal-page-break.php

<html>

<title>Product</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.js"></script>

<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

<body> <div class="container"> <input type="button" class="export-button" on‌click="generateHorizontalPageBreak();" value="Export PDF" /> </div>

</body>

</html>

The autoTable sets horizontalPageBreak: true to switch on this feature.

function generateHorizontalPageBreak() { var doc = new jspdf.jsPDF('l') var head = [['Product ID', 'Product Name', 'Price in USD', 'Version', 'Model', 'Last updated date', 'Number of active installations', 'Reviews', 'Long text']] var body = [['2022#3v5', 'Mailer Adapter Component', '300', 'v5', '2022.3.3', 'JUN 2022', '100000+', '3245', 'Sed a risus porta est consectetur mollis eu quis dui. Phasellus in neque sagittis, placerat massa faucibus, commodo quam.']] doc.autoTable({ head: head, body: body, startY: 25, // split overflowing columns into pages horizontalPageBreak: true, // repeat this column in split pages horizontalPageBreakRepeat: 0, })

doc.save('table.pdf');

}

Conclusion

Thus, we have seen various tools in jsPDF AutoTable to create PDF tables. By learning how to convert HTML table to PDF, it will be helpful in a report generation utility of an application.

PDF tables always useful to export statistics or other tabular data from HTML. The source of data can be a database or excel which loaded into HTML tables or converted into an JSON array to parse.

Download

↑ Back to Top

Problem Formulation

Challenge: Given a CSV file. How to convert it to an excel file in Python?

We create a folder with two files, the file csv_to_excel.py and my_file.csv. We want to convert the CSV file to an excel file so that after running the script csv_to_excel.py, we obtain the third file my_file.csv in our folder like so:

All methods discussed in this tutorial show different code snippets to put into csv_to_excel.py so that it converts the CSV to XLSX in Python.

Method 1: 5 Easy Steps in Pandas

The most pythonic way to convert a .csv to an .xlsx (Excel) in Python is to use the Pandas library.

1. Install the pandas library with pip install pandas
2. Install the openpyxl library that is used internally by pandas with pip install openpyxl
3. Import the pandas libray with import pandas as pd
4. Read the CSV file into a DataFrame df by using the expression df = pd.read_csv('my_file.csv')
5. Store the DataFrame in an Excel file by calling df.to_excel('my_file.xlsx', index=None, header=True)

import pandas as pd df = pd.read_csv('my_file.csv')

df.to_excel('my_file.xlsx', index=None, header=True)

Note that there are many ways to customize the to_excel() function in case

• you don’t need a header line,
• you want to fix the first line in the Excel file,
• you want to format the cells as numbers instead of strings, or
• you have an index column in the original CSV and want to consider it in the Excel file too.

If you want to do any of those, feel free to read our full guide on the Finxter blog here:

Tutorial: Pandas DataFrame.to_excel() – An Unofficial Guide to Saving Data to Excel

Also, we’ve recorded a video on the ins and outs of this method here:

Let’s have a look at an alternative to converting a CSV to an Excel file in Python:

Method 2: Modules csv and openpyxl

To convert a CSV to an Excel file, you can also use the following approach:

• Import the csv module
• Import the openpyxl module
• Read the CSV file into a list of lists, one inner list per row, by using the csv.reader() function
• Write the list of lists to the Excel file by using the workbook representation of the openpyxl library.
• Get the active worksheet by calling workbook.active
• Write to the worksheet by calling worksheet.append(row) and append one list of values, one value per cell.

The following function converts a given CSV to an Excel file:

import csv

import openpyxl def csv_to_excel(csv_filename, excel_filename): # Read CSV file csv_data = [] with open(csv_filename) as f: csv_data = [row for row in csv.reader(f)] # Write to Excel file workbook = openpyxl.workbook.Workbook() worksheet = workbook.active for row in csv_data: worksheet.append(row) workbook.save(excel_filename) if __name__ == "__main__": csv_to_excel("my_file.csv", "my_file.xlsx")

This is a bit more fine-granular approach and it allows you to modify each row in the code or even write additional details into the Excel worksheet.

Where to Go From Here?

Enough theory. Let’s get some practice!

Coders get paid six figures and more because they can solve problems more effectively using machine intelligence and automation.

To become more successful in coding, solve more real problems for real people. That’s how you polish the skills you really need in practice. After all, what’s the use of learning theory that nobody ever needs?

You build high-value coding skills by working on practical coding projects!

Do you want to stop learning with toy projects and focus on practical code projects that earn you money and solve real problems for people?

If your answer is YES!, consider becoming a Python freelance developer! It’s the best way of approaching the task of improving your Python skills—even if you are a complete beginner.

If you just want to learn about the freelancing opportunity, feel free to watch my free webinar “How to Build Your High-Income Skill Python” and learn how I grew my coding business online and how you can, too—from the comfort of your own home.

Join the free webinar now!