{"id":2931,"date":"2019-09-05T14:14:00","date_gmt":"2019-09-05T14:14:00","guid":{"rendered":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/"},"modified":"2021-11-29T20:41:30","modified_gmt":"2021-11-29T20:41:30","slug":"how-to-add-excel-import-and-export-to-your-vue-app","status":"publish","type":"post","link":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/","title":{"rendered":"How to Add Excel Import and Export to your Vue App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2931\" class=\"elementor elementor-2931\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8df68da elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"8df68da\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6e310439\" data-id=\"6e310439\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-93386d0 elementor-widget elementor-widget-text-editor\" data-id=\"93386d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>&#8220;It looks great, but could you just add Excel import?&#8221;<\/p><p>If you\u2019ve developed software for a long time, you\u2019ve probably heard that question from a manager more than once. To a non-technical crowd, asking for Excel import\/export doesn\u2019t sound like a big deal. How hard could it be, right?<\/p><p>But all too often, this question strikes fear into the hearts of developers. On most platforms, working with Excel files requires lots of work. Historically, this has been doubly true on the web. Working with Excel data in a web app has felt a bit like\u00a0<a href=\"https:\/\/xkcd.com\/1425\/\" target=\"_blank\" rel=\"noopener noreferrer\">this xkcd comic<\/a>: &#8220;It can be hard to explain the difference between the easy, and the virtually impossible.&#8221; Building your own in-browser spreadsheet with Excel import and Excel export\u00a0<em>feels<\/em>\u00a0like a problem that will take five years and a research team to solve.<\/p><p>That\u2019s changing. We now have turnkey libraries that let you drop a fully-functioning spreadsheet into your web app.\u00a0<a href=\"https:\/\/contentlab.com\/spreadjs\">SpreadJS<\/a>\u00a0is one of them. We\u2019re going to look at how to take an existing Vue app \u2013 a real world app using a Vuex store \u2013 and enhance it using SpreadJS.<\/p><p>The rest of the article assumes that you already understand HTML, CSS, and JavaScript. It also assumes you have a working knowledge of the Vue.js progressive\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0framework for creating web UI. It will help if you\u2019ve used Vuex for state management, but don\u2019t worry if you haven\u2019t. It\u2019s intuitive and easy to understand, and you\u2019ll be able to figure out what\u2019s going on just by reading the code if you\u2019ve used Vue.<\/p><h2 id=\"the-vue-app\">The Vue App<\/h2><p>The Vue app we\u2019ll be working on is a straightforward sales dashboard with a few summary panels and a table of data. It\u2019s the kind of app that falls into the &#8220;not bad&#8221; category:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/1.jpg\" alt=\"How to Add Excel Import and Export to your Vue App\" \/><\/p><p>Although it\u2019s just a demo, it\u2019s exactly the kind of app that enterprise web developers have to create. It\u2019s also exactly the kind of app that we\u2019re typically asked to add Excel functionality to, so it will be a perfect example for the rest of this article.<\/p><p>You can see the\u00a0<a href=\"https:\/\/codesandbox.io\/s\/k93yzqp9zv\" target=\"_blank\" rel=\"noopener noreferrer\">app running live on CodeSandbox<\/a>.<\/p><p>To set the stage: the dashboard is a single page application made with Vue. It\u2019s using the latest and greatest Vue best practices: single-file components and a Vuex data store. It\u2019s also using Bootstrap for its CSS components and grid system.<\/p><p>Bootstrap isn\u2019t as popular as it used to be. But in reality, Bootstrap is still everywhere \u2013\u00a0<em>especially<\/em>\u00a0in the kinds of enterprise web apps where Excel support is usually needed. I\u2019d wager that plenty of\u00a0<em>new<\/em>\u00a0enterprise web apps will still use Bootstrap in 2030.<\/p><p>If you\u2019d rather use\u00a0<a href=\"https:\/\/bulma.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bulma<\/a>\u00a0or\u00a0<a href=\"https:\/\/tachyons.io\/\">Tachyons<\/a>\u00a0in your own spreadsheet-enabled apps, go right ahead! SpreadJS will work happily with either of them.<\/p><h3 id=\"vue-application-structure\">Vue Application Structure<\/h3><p>Let\u2019s take a look at how the code is structured. Our Vuex store and Vue application are both defined in\u00a0<code>index.js.<\/code>\u00a0We have several single-file Vue components, all located in the\u00a0<code>components<\/code>\u00a0folder.<\/p><p>If you look at our Vuex store, you\u2019ll see the following:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-678e4ad elementor-widget elementor-widget-code-highlight\" data-id=\"678e4ad\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const store = new Vuex.Store({  \r\n  state: {  \r\n    recentSales  \r\n  }  \r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b2c9d8 elementor-widget elementor-widget-text-editor\" data-id=\"2b2c9d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Our store\u2019s initial state is just set to the value of recentSales, which is a set of dummy data we imported.<\/p><p>Wait a minute \u2013 if we\u2019ve only got one set of data, how are we generating three charts\u00a0<em>and<\/em>\u00a0a table? To see what\u2019s happening, open up the Dashboard.vue component. In it, you\u2019ll see several computed properties are being generated based on the data in the Vuex store:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf139d8 elementor-widget elementor-widget-code-highlight\" data-id=\"bf139d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><template>  \r\n  <div style=\"background-color: #ddd\">  \r\n      <NavBar title=\"Awesome Dashboard\"\/>  \r\n      <div class=\"container\">  \r\n      <div class=\"row\">  \r\n      <TotalSales :total=\"totalSales\"\/>  \r\n      <SalesByCountry :salesData=\"countrySales\"\/>  \r\n      <SalesByPerson :salesData=\"personSales\"\/>  \r\n      <SalesTable :tableData=\"salesTableData\"\/>  \r\n      <\/div>  \r\n      <\/div>  \r\n  <\/div>  \r\n<\/template>\r\n\r\n<script>  \r\nimport NavBar from \".\/NavBar\";  \r\nimport TotalSales from \".\/TotalSales\";  \r\nimport SalesByCountry from \".\/SalesByCountry\";  \r\nimport SalesByPerson from \".\/SalesByPerson\";  \r\nimport SalesTable from \".\/SalesTable\";  \r\nimport { groupBySum } from \"..\/util\/util\";\r\n\r\nexport default {  \r\n  components: { NavBar, SalesByCountry, SalesByPerson, SalesTable, TotalSales },  \r\n  computed: {  \r\n      totalSales() {  \r\n        const total = this.$store.state.recentSales.reduce(  \r\n          (acc, sale) => (acc += sale.value), 0);  \r\n        return parseInt(total);  \r\n      },  \r\n      countrySales() {  \r\n        const items = this.$store.state.recentSales;  \r\n        const groups = groupBySum(items, \"country\", \"value\");  \r\n        return groups;  \r\n      },  \r\n      personSales() {  \r\n        const items = this.$store.state.recentSales;  \r\n        const groups = groupBySum(items, \"soldBy\", \"value\");  \r\n        return groups;  \r\n      },  \r\n      salesTableData() {  \r\n        return this.$store.state.recentSales;  \r\n      }  \r\n  }  \r\n};  \r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-047f64f elementor-widget elementor-widget-text-editor\" data-id=\"047f64f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Now it makes more sense! The single data set contains everything we need to generate all of the numbers and tables for our dashboard. Since the data is in a reactive Vuex store, if the data updates then all of the dashboard panels will update automatically.<\/p><p>This reactivity will come in\u00a0<em>very<\/em>\u00a0handy in the next section, when we replace our boring old static table with an editable spreadsheet.<\/p><h3 id=\"adding-spreadjs-to-your-vue-app\">Adding SpreadJS to your Vue App<\/h3><p>Here\u2019s where the fun starts! We have our dashboard, but we want to get rid of that clunky old HTML table. So we\u2019ll have to change things up a little bit. CodeSandbox was great for seeing our starting point, but we must run our app locally to use SpreadJS in development mode without a license.<\/p><p>You can clone a copy of the code from the following GitHub repository:\u00a0<a href=\"https:\/\/github.com\/rpeden\/vue-spreadjs\">https:\/\/github.com\/rpeden\/vue-spreadjs<\/a>. Once you\u2019ve done that, open a terminal, navigate to the directory where you cloned the repository and run \u2018npm install\u2019. This installs the dependencies needed to run the application. When dependency installation finishes, run \u2018npm serve\u2019 to see the updated app in action.<\/p><p>Let\u2019s walk through the changes we\u2019ll have to make to upgrade our old app to its new and improved version. Since we\u2019re going to replace our sales table with a spreadsheet, we\u2019re going to put the sheet into our existing SalesTable component. But first, we\u2019ll have to get rid of our old table. Once it is gone, our SalesTable template will look like this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd206ba elementor-widget elementor-widget-code-highlight\" data-id=\"fd206ba\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><template>  \r\n  <TablePanel title=\"Recent Sales\">  \r\n  <\/TablePanel>  \r\n<\/template><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b6ede1 elementor-widget elementor-widget-text-editor\" data-id=\"0b6ede1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>After eliminating the table, we\u2019ve got our table panel ready and waiting for a spreadsheet, so let\u2019s add one! After adding a SpreadJS sheet, our template will look like this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f05a372 elementor-widget elementor-widget-code-highlight\" data-id=\"f05a372\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><template>  \r\n  <TablePanel title=\"Recent Sales\">  \r\n    <gc-spread-sheets :hostClass='hostClass' @workbookInitialized='workbookInit'>  \r\n      <gc-worksheet :dataSource='tableData'          :autoGenerateColumns='autoGenerateColumns'>  \r\n        <gc-column  \r\n            :width='50'  \r\n            :dataField=\"'id'\"  \r\n            :headerText=\"'ID'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n          >  \r\n        <\/gc-column>  \r\n        <gc-column  \r\n            :width='300'  \r\n            :dataField=\"'client'\"  \r\n            :headerText=\"'Client'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n        >  \r\n        <\/gc-column>  \r\n        <gc-column  \r\n            :width=\"350\"  \r\n            :headerText=\"'Description'\"  \r\n            :dataField=\"'description'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n        >  \r\n        <\/gc-column>  \r\n        <gc-column  \r\n            :width=\"100\"  \r\n            :dataField=\"'value'\"  \r\n            :headerText=\"'Value'\"  \r\n            :visible = 'visible'  \r\n            :formatter = 'priceFormatter'  \r\n            :resizable = 'resizable'  \r\n          >  \r\n          <\/gc-column>  \r\n          <gc-column  \r\n            :width=\"100\"  \r\n            :dataField=\"'itemCount'\"  \r\n            :headerText=\"'Quantity'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n          >  \r\n          <\/gc-column>  \r\n          <gc-column  \r\n            :width=\"100\"  \r\n            :dataField=\"'soldBy'\"  \r\n            :headerText=\"'Sold By'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n          ><\/gc-column>  \r\n          <gc-column  \r\n            :width=\"100\"  \r\n            :dataField=\"'country'\"  \r\n            :headerText=\"'Country'\"  \r\n            :visible = 'visible'  \r\n            :resizable = 'resizable'  \r\n          ><\/gc-column>        \r\n      <\/gc-worksheet>  \r\n    <\/gc-spread-sheets>  \r\n  <\/TablePanel>  \r\n<\/template><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb4f2b2 elementor-widget elementor-widget-text-editor\" data-id=\"bb4f2b2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>That\u2019s a lot to take in, so let\u2019s walk through it to understand what is happening.<\/p><p>First, we create a spreadsheet by using the\u00a0<code>gc-spread-sheets<\/code>\u00a0element and binding it to two of our component\u2019s properties:\u00a0<code>hostClass<\/code>\u00a0and\u00a0<code>workbookInit<\/code>.<\/p><p>Inside the spreadsheet, we create a new worksheet with the\u00a0<code>gc-worksheet<\/code>\u00a0element and binding it to our component\u2019s\u00a0<code>tableData<\/code>\u00a0and\u00a0<code>autoGenerateColumns properties<\/code>. Note that\u00a0<code>tableData<\/code>\u00a0is exactly the same\u00a0<code>tableData<\/code>\u00a0we used to generate our plain HTML table. We can put our data into SpreadJS as-is with no changes required!<\/p><p>Finally, inside the worksheet we define columns that tell SpreadJS how to display our data. The dataField property tells us which property of the underlying dataset this column should display, and headerText gives SpreadJS a nicely-formatted column name to use. The rest of the bindings for each column are straightforward; the SpreadJS documentation has\u00a0<a href=\"https:\/\/help.grapecity.com\/spread\/SpreadSheets12\/webframe.html#UsingtheGc-columnElement.html\" target=\"_blank\" rel=\"noopener noreferrer\">a complete list<\/a>\u00a0of everything you can pass to a gc-column.<\/p><p>So with our template in place, exactly how much code is going to be needed to make this all work? Fortunately, not much at all! Here\u2019s our SalesTable component\u2019s new script code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7405bcf elementor-widget elementor-widget-code-highlight\" data-id=\"7405bcf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import \"@grapecity\/spread-sheets\/styles\/gc.spread.sheets.excel2016colorful.css\";\r\n\r\n_\/\/ SpreadJS imports_  \r\nimport \"@grapecity\/spread-sheets-vue\";  \r\nimport Excel from \"@grapecity\/spread-excelio\";\r\n\r\nimport TablePanel from \".\/TablePanel\";  \r\nexport default {  \r\n  components: { TablePanel },  \r\n  props: [\"tableData\"],  \r\n  data(){  \r\n      return {  \r\n        hostClass:'spreadsheet',  \r\n        autoGenerateColumns:true,  \r\n        width:200,  \r\n        visible:true,  \r\n        resizable:true,  \r\n        priceFormatter:\"$ #.00\"  \r\n      }  \r\n    },  \r\n  methods: {  \r\n      workbookInit: function(_spread_) {  \r\n        this._spread = spread;  \r\n      }  \r\n    }  \r\n};<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8adb0a elementor-widget elementor-widget-text-editor\" data-id=\"d8adb0a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Due to Vue\u2019s simplicity, it takes very little code to make this work. If there\u2019s anything here you\u2019re unfamiliar with, the \u2018Components In-depth\u2019 section of the Vue documentation explains Vue components in detail. The only things that have changed from before are a few imports, some data properties, and a couple of methods. The data properties should look familiar; we saw them a moment ago in the template. They\u2019re configuration options we are binding to the components in our SpreadJS spreadsheet.<\/p><p>The workbookInit method is a callback that SpreadJS calls when the sheet is initialized. In this method, we save our SheetJS spreadsheet object as an instance variable on our component so we can interact with it directly if necessary.<\/p><p>One final change: we give our component a scoped style to help the spreadsheet style itself. We saw this earlier when we passed the hostClass to the gc-spread-sheets element. Since hostClass is set to \u2018spreadsheet\u2019, we\u2019re going to create a CSS class named spreadsheet:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5db0d3 elementor-widget elementor-widget-code-highlight\" data-id=\"e5db0d3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><style scoped>  \r\n.spreadsheet {  \r\n  width: 100%;  \r\n  height: 400px;  \r\n  border: 1px solid lightgray;  \r\n}  \r\n<\/style><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6d21c8 elementor-widget elementor-widget-text-editor\" data-id=\"f6d21c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>And at this point, if we make no other changes and load our Dashboard, it will look like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/2.jpg\" alt=\"\" \/><\/p><p>But wait, there\u2019s more!<\/p><p>Remember how we passed our table data to the spreadsheet without making any changes to the data set? Now that our data is in a spreadsheet, we can edit it.<\/p><p>What will happen if we change the value of sale #6 from $35,000 to $3500? If we go into the sheet and edit the value, we get a dashboard that looks like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/2.jpg\" alt=\"How to Add Excel Import and Export to your Vue App\" \/><\/p><p>Wow! What happened?!?<\/p><p>We updated the SpreadJS sheet, and it\u00a0<em>automatically<\/em>\u00a0updated our Vuex store. We didn\u2019t have to add\u00a0<em>any<\/em>\u00a0code to make this happen. It just worked! The SpreadJS Vue wrapper is reactive out of the box.<\/p><p>It also looks like Angela went from having a spectacular sales month to having a mediocre one. Sorry about that, Angela!<\/p><p>I\u2019m a veteran developer who isn\u2019t easily impressed, but I admit that this brought a smile to my face. I was expecting to manually wire up change handlers to bind spreadsheet changes back to my Vuex store, but SpreadJS handled it for me.<\/p><p>We now have an enhanced dashboard that a manager would be happy with. They can modify the data and watch the dashboard update before their eyes. But we can do even better by adding the ability to import and export Excel files. Next, we\u2019ll learn how to do that.<\/p><h3 id=\"adding-excel-export\">Adding Excel Export<\/h3><p>Adding Excel export to our sheet is easy. First, let\u2019s add an export button to our dashboard. We\u2019re going to place it at the bottom of our table panel, right after the gc-spread-sheets closing tag:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1695f7 elementor-widget elementor-widget-code-highlight\" data-id=\"e1695f7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\u2026  \r\n    <\/gc-spread-sheets>  \r\n    <div class=\"dashboardRow\">  \r\n      <button class=\"btn btn-primary dashboardButton\" @click=\"exportSheet\">  \r\n        Export to Excel  \r\n      <\/button>  \r\n    <\/div>  \r\n  <\/TablePanel>  \r\n<\/template><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5c586d elementor-widget elementor-widget-text-editor\" data-id=\"d5c586d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As you can see, our button is expecting a click handler named exportSheet. We\u2019ll add it in a moment, but first we\u2019re we will import a function from an NPM package named file-saver:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9cba79 elementor-widget elementor-widget-code-highlight\" data-id=\"c9cba79\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import { saveAs } from 'file-saver';<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ee24b9 elementor-widget elementor-widget-text-editor\" data-id=\"1ee24b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Next, let\u2019s add exportSheet to our component\u2019s methods object:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e616ea elementor-widget elementor-widget-code-highlight\" data-id=\"6e616ea\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>exportSheet: function() {  \r\n  const spread = this._spread;  \r\n  const fileName = \"SalesData.xlsx\";  \r\n  const sheet = spread.getSheet(0);  \r\n  const excelIO = new Excel.IO();  \r\n  const json = JSON.stringify(spread.toJSON({  \r\n      includeBindingSource: true,  \r\n      columnHeadersAsFrozenRows: true,  \r\n  }));  \r\n  excelIO.save(json, function(_blob_){  \r\n    saveAs(blob, fileName);  \r\n  }, function (_e_) {   \r\n    console.log(e)   \r\n  });  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35fd9d9 elementor-widget elementor-widget-text-editor\" data-id=\"35fd9d9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Here\u2019s what the code is doing: first, we get a reference to our Sales Data sheet. Since it\u2019s the only sheet in our spreadsheet, it lives at index 0 and we access it by calling getSheet.<\/p><p>When then instantiate SpreadJS\u2019 ExcelIO library, convert our sheet to JSON, and ask SpreadJS to save it. And voila! We\u2019ve exported an Excel file from our spreadsheet-enabled Vue app!<\/p><p>Note that we\u2019re passing two serialization options to the sheet\u2019s toJSON call: includeBindingSource and columnHeadersAsFrozenRows. Together, these options ensure that the data we bound to the sheet is exported correctly, and that the sheet contains our column headers so anyway looking at the exported Excel file will understand what each column contains.<\/p><h3 id=\"adding-excel-import\">Adding Excel Import<\/h3><p>Next, it\u2019s time to add the ability to\u00a0<em>import<\/em>\u00a0Excel files.<\/p><p>Right below our export button, we\u2019re going to add the following bit of markup:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e101c72 elementor-widget elementor-widget-code-highlight\" data-id=\"e101c72\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div>  \r\n  <b>Import Excel File:<\/b>  \r\n  <div>  \r\n    <input type=\"file\" class=\"fileSelect\" @change='fileChange($event)' \/>  \r\n  <\/div>  \r\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8ef890 elementor-widget elementor-widget-text-editor\" data-id=\"d8ef890\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>As you can see, we\u2019re going to be using a standard HTML file picker, and triggering a component method named fileChange when a file is selected.<\/p><p>Now that we\u2019ve added the template, let\u2019s add the change handler to our component\u2019s methods object:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7865d88 elementor-widget elementor-widget-code-highlight\" data-id=\"7865d88\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>fileChange: function (_e_) {  \r\n      if (this._spread) {  \r\n      const fileDom = e.target || e.srcElement;  \r\n      const excelIO = new Excel.IO();  \r\n      const spread = this._spread;  \r\n      const store = this.$store;\r\n\r\n      excelIO.open(fileDom.files[0], (_data_) => {  \r\n      const newSalesData = extractSheetData(data);  \r\n      store.commit('updateRecentSales', newSalesData)  \r\n    });  \r\n  }  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33e6571c elementor-widget elementor-widget-text-editor\" data-id=\"33e6571c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">Importing an Excel file is much the same as exporting it, except in reverse. After a file is chosen, we ask ExcelIO to import it. When done, it passes the sheet information to a callback function as a JavaScript object. Next, we pass the imported data through a custom function to extract the data we need from it and then commit it back to the Vuex store.<\/span><br><\/pre>\n<p>In our extractSheetData function &#8211; which you\u2019ll find in the src\/util.util.js file &#8211; you\u2019ll see that we pull data out of the <a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a> object returned by ExcelIO and restructure it to match the shape of the data in our Vuex store.<\/p>\n<p>Our import function assumes that the data in the imported sheet will have the same columns as our original data set. If someone uploads a spreadsheet that doesn\u2019t meet this requirement, our app won\u2019t be able to handle it. This is an acceptable limitation in most line-of-business apps. Since our dashboard is designed to display a specific type of data, it\u2019s reasonable to ask users to supply data in the format the app is expecting.<\/p>\n<p>When data extraction is complete, we call commit on the Vuex store and send the updated sales transaction data. The SpreadJS sheet and all of the dashboard panels then update themselves to reflect the new data.<\/p>\n<h3 id=\"testing-your-vue-app\">Testing Your Vue App<\/h3>\n<p>Now that seen the code, let\u2019s test out Excel import and export in our Vue app.<\/p>\n<p>Start by clicking the \u2018Export to Excel\u2019 button. Your web browser will then download an Excel spreadsheet containing all of the data we saw in our dashboard\u2019s spreadsheet.<\/p>\n<p>Open the sheet in Excel and add a couple of lines of data. It\u2019s okay if you use new countries or new salespeople; all our dashboard components can handle it. Just be careful not to change the column order or names. When you\u2019re finished, click the \u2018Choose File\u2019 button at the bottom of the Recent Sales panel. Select the Excel file you just edited.<\/p>\n<p>When you select the file, you\u2019ll see all of the dashboard components update.<\/p>\n<h3 id=\"conclusion\">Conclusion<\/h3>\n<p>We\u2019re done! We took an ordinary Vue dashboard app and added a live spreadsheet to it. We can now edit the data in the sheet and watch our entire dashboard update itself. Our enhanced dashboard is also able to import and export Excel files.<\/p>\n<p>Vue, Vuex, and SpreadJS complement each other well. With Vue\u2019s easy templating and data binding, Vuex\u2019s reactive data store, and SpreadJS\u2019 interactive spreadsheets, complex enterprise JavaScript apps can be created in hours.<\/p>\n<p>As great as this might seem, we\u2019ve barely scratched the surface of what SpreadJS can do. To better understand what SpreadJS can do for you, refer to <a href=\"https:\/\/www.grapecity.com\/en\/demos\/spread\/JS\/TutorialSample\/#\/\">SpreadJS tutorial site<\/a>. If you\u2019re looking to dive deeper into using SpreadJS in your own apps, the <a href=\"http:\/\/help.grapecity.com\/spread\/SpreadSheets11\/webframe.html#devguide.html\">SpreadJS Developer\u2019s Guide<\/a> has the information you need.<\/p>\n<h3 id=\"what-s-next\">What\u2019s Next<\/h3>\n<p>Our dashboard with a spreadsheet is great. It\u2019s missing something, though. What\u2019s one thing managers <em>love<\/em> to see on dashboards?<br>Charts!<\/p>\n<p>Fortunately, SpreadJS has built-in charting support. In a future article, we\u2019re going to learn how to enhance our dashboard with SpreadJS charts. In another article we discuss how to <a href=\"https:\/\/www.grapecity.com\/blogs\/slice-your-javascript-charts-with-spreadjs-slicers\">slice your JavaScript charts with SpreadJS slicers.<\/a><br><br><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><br><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8220;It looks great, but could you just add Excel import?&#8221; If you\u2019ve developed software for a long time, you\u2019ve probably heard that question from a manager more than once. To a non-technical crowd, asking for Excel import\/export doesn\u2019t sound like a big deal. How hard could it be, right? But all too often, this question [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5249,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,324],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"&#8220;It looks great, but could you just add Excel import?&#8221; If you\u2019ve developed software for a long time, you\u2019ve probably heard that question from a manager more than once. To a non-technical crowd, asking for Excel import\/export doesn\u2019t sound like a big deal. How hard could it be, right? But all too often, this question [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-05T14:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-29T20:41:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"How to Add Excel Import and Export to your Vue App\",\"datePublished\":\"2019-09-05T14:14:00+00:00\",\"dateModified\":\"2021-11-29T20:41:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\"},\"wordCount\":2291,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png\",\"keywords\":[\"JavaScript\",\"Vue.js\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\",\"url\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\",\"name\":\"How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png\",\"datePublished\":\"2019-09-05T14:14:00+00:00\",\"dateModified\":\"2021-11-29T20:41:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Excel Import and Export to your Vue App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab","og_description":"&#8220;It looks great, but could you just add Excel import?&#8221; If you\u2019ve developed software for a long time, you\u2019ve probably heard that question from a manager more than once. To a non-technical crowd, asking for Excel import\/export doesn\u2019t sound like a big deal. How hard could it be, right? But all too often, this question [&hellip;]","og_url":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-09-05T14:14:00+00:00","article_modified_time":"2021-11-29T20:41:30+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#article","isPartOf":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"How to Add Excel Import and Export to your Vue App","datePublished":"2019-09-05T14:14:00+00:00","dateModified":"2021-11-29T20:41:30+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/"},"wordCount":2291,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","keywords":["JavaScript","Vue.js"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/","url":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/","name":"How to Add Excel Import and Export to your Vue App &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage"},"image":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","datePublished":"2019-09-05T14:14:00+00:00","dateModified":"2021-11-29T20:41:30+00:00","breadcrumb":{"@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/contentlab.com\/how-to-add-excel-import-and-export-to-your-vue-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"How to Add Excel Import and Export to your Vue App"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/10.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2931"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2931"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2931\/revisions"}],"predecessor-version":[{"id":6084,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2931\/revisions\/6084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5249"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2931"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}