Export Records to an Excel File
Overview
This article introduces a method to output data as an Excel file directly from a Kintone App with one click.
Sample Image
In this example, a Custom View in the Kintone App displays the record data in a table format. Clicking the button above the table exports the data into an Excel file.
Prepare the App
Create the form
Create an App
with the following fields.
Field type | Field name | Field code |
---|---|---|
Record number | Record number | record_number |
Text | Title | title |
Text area | Details | details |
The form settings should look like the below screenshot.
Save the form when finished.
Custom a Custom View
Navigate to the Views tab and click the [+] button to create a new View. Select the Custom view option and enter the following code into the HTML Code option.
|
|
The View settings should look like the below screenshot.
Save the View when finished.
Set the libraries
This example uses
jQuery
v3.3.1,
FileSaver
v1.3.4 and
SheetJS
.
Set the following URLs and files into the Upload JavaScript for PC option of the App's
JavaScript and CSS Customization settings
.
- URL: https://js.kintone.com/jquery/3.3.1/jquery.min.js
- File: FileSaver.min.js (downloaded from
here
)
- File: xlsx.full.min.js (downloaded from
here
)
Sample Code
Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the
JavaScript and CSS Customization settings
.
|
|
The JavaScript and CSS Customization* settings should look like the following screenshot.
Attention
Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the jQuery, FileSaver, and SheetJS JavaScript imports are uploaded before the custom JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.
After saving the settings and clicking on Update App, navigate to the Custom View. A button labeled Download XLSX should appear above the Custom View. Clicking the button should output the Kintone data in xlsx format.
Code Explanation
Lines 132-136
|
|
Creates data for output when the app.record.index.show event is triggered as the page loads.
Lines 33-47
|
|
Uses the function fetchRecords() to retrieve all Kintone records.
Lines 22-31
|
|
Creates an element from the retrieved data.
Lines 105-117
|
|
Creates an HTML table from the element.
Lines 61-86
|
|