Quick Start Guide | |
---|---|
Tutorial Concept | Learn how to import, modify, and export Excel (.xlsx) files in Vue applications. |
What You Will Need |
Vue App |
Controls Referenced |
This article demonstrates how software developers can add importing and exporting Excel file capabilities to their Vue applications using a Vue spreadsheet component and API library. This example utilizes SpreadJS, a popular enterprise-level Vue spreadsheet component, which offer a familiar Excel-like spreadsheet UI and import/export capabilities without any dependencies on Microsoft Excel.
Want to test exporting Excel File from You Vue Application? Download a Free Trial of SpreadJS Today!
Steps to Import & Export Excel (.XLSX) from Vue Apps
- Create a Vue Spreadsheet Application
- Add Excel Import Code - Import Method
- Add Data to the Import Excel File
- Add Excel Export Code - Export Method
Download a finished sample application to follow along with the tutorial.
Create a Vue Spreadsheet Application
Using the following command create a simple Vue project. This command will run create-vue, the Vue scaffolding tool, with optional prompts for features like TypeScript and testing support.
Note, you will be given several optional features such as TypeScript and Testing Support:
After creating the project, use the following commands to navigate to the project directory and install the necessary NPM dependencies for SpreadJS and File-Saver.
Update the main.js file to integrate the spreadsheet components by replacing its content with the code below. This will enable the use of GcSpreadSheets, GcWorksheet, and GcColumn components throughout your application.
Next, update the App.vue file's template to render the host element for SpreadJS and create options for interacting with the Excel files, including import, modifying, and saving to Excel.
After the template, within the script tags, declare the imports of the needed SpreadJS and File-Saver components. These imports will enable access to the Vue spreadsheet object of the SpreadJS library and support for charts, shapes, and import/export to/from the spreadsheet instance.
In App.vue, define the component options to initialize the Vue Spreadsheet and handle Excel files. The initSpread method initializes the Vue spreadsheet instance, while there are placeholders for loadExcel, modifyExcel, and saveExcel methods. We will cover these file operations in the later sections.
Save all of the files, and run the Vue app.
You have now created a Vue spreadsheet application.
Add Excel Import Code to a Vue Application
Invoke the SpreadJS Workbook's import method within the loadExcel method to read the user selected Excel file into the Vue spreadsheet object and display it within the UI.
You can do the same thing with an Excel file on a server by reading it from a URL.
An Excel (.xlsx) file can now be imported, viewed, and modified within the Vue spreadsheet component.
Add Data to the Imported Excel File
In this tutorial we will use the “Profit loss statement” Excel template seen here:
Within the modifyExcel method, developers can programmatically add a new row to the spreadsheet, fill it with revenue data, add the sparkline visualization, and set a formula to calculate the sum for the year.
Notice, with this code logic applied the new row of revenue data is added cohesively to the existing Vue spreadsheet data.
Add Excel Export Code to a Vue Application
Invoke the SpreadJS Workbook's export method within the saveExcel method to save the modified Vue spreadsheet data to a local Excel .xlsx file.
The exported Excel file contains the modified data and keeps the same formatting and styling as seen in the Vue app display, and from the originally imported Excel file.
Learn More About this Vue Spreadsheet Component
This article only scratches the surface of the full capabilities of SpreadJS, the Vue spreadsheet component. Review the documentation to see some of the many available features, and check out our online demos to see the features in action and interact with the sample code. Integrating a spreadsheet component into your applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality without referring them to an external program. To learn more about SpreadJS and the new features added in the latest release check out our release pages and this video:
In another article series, we demonstrate how to export Excel in other frameworks:
Want to test exporting Excel in Your Vue Application? Download a Trial Now!