Exporting Data Using Excel and a Javascript Table

Currently, I am utilizing angularjs to export data into excel from an uploaded table. Here is the code snippet I am using:

function (e)
    {<br>
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('div[id$=exportable]').html()));<br>
e.preventDefault();

While this code successfully enables file download, it lacks a file extension. Could someone provide me with guidance on how to modify both the file name and extension?

Thank you.

Answer №1

Transforming Excel Data to JSON

If you're searching for a way to convert Excel data into JSON using JavaScript, look no further. Check out this informative article that demonstrates how it can be achieved utilizing XLSXReader in a web application integrated with AngularJS.

Code Example

$(function() {
    $("#xlsxFile").change(function(event) {
        var file = this.files[0],
            sheets;
        XLSXReader(file, true, function(xlsxData) {
            sheets = xlsxData.sheets;
            // Perform operations on 'sheets'. It is a
            // Javascript object containing sheet names
            // as keys and data as values in the form of 2D arrays.
        });
    });
}); 

Interactive Demonstration

Experience a live implementation of the code here. You can upload a csv file and witness its conversion into JSON format.

I trust this information proves beneficial.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

My Ionic App runs smoothly in the browser when using ionic serve. However, I encounter issues with routing when running the app in Ionic View (view.ionic.io) after uploading it with ionic upload. The index.html loads but nothing within <div ui-view=""& ...

JavaScript's XMLHttpRequest

My attempt to bypass the WebGoat prompt involved using a combination of javascript code with XMLHttpRequest to send multiple requests, one using GET and the other using POST. The code snippet is as follows: <script> var req1 = new XMLHttpRequest() ...

Submitting a form from outside the form using a button in HTML: A step-by-step guide

I'm looking to submit a form using Angular on the functions next() and saveStep(). I'm unable to place next() and saveStep() within the form itself. I have set up my ng-click for next() and saveStep() below the form. When I submit the form fro ...

What is the best way to display the currently selected value in a Vue select drop down?

Is there a way to make the selected item in a custom component dropdown appear, similar to this Vue.js question? I have debug output within my single file component (SFC). <script> export default { props: ['modelValue', 'options&apos ...

Shared codes are compatible with both C and Javascript programming languages

Within the scope of this project, data will be retrieved from the server in either JSON or XML format. There are two separate client applications that will handle the data processing, with one being web-based and written in JavaScript, while the other is ...

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

Exploring the capabilities of a Vue.js component

I am currently facing some challenges while trying to test a Vue.js component. My main issue lies in setting a property for the component and verifying that it has been set correctly. For context, the module has been loaded with exports and the JavaScrip ...

Issue with pushing inner list<object> in Knockout version 3.2.0

Currently, I am working with knockout.js on an ASP application. The issue I am facing involves a list of objects returned by the controller action to the view, where the objects in the list point to another list of objects. My struggle lies in adding new o ...

Reading the final element in the series with an IF statement

Something strange is happening with my code. I have a variable called racks_value that gets updated based on calculations performed on the page. Despite manually setting racks_value to 2 and confirming it with a console log, after running a series of IF st ...

Retrieve the initial image link from a blogger's post in cases where it is not being stored on the Blogger platform for use in related

I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...

WebStorm failing to identify Node.js functions

I recently began my journey in learning node.js and I'm currently utilizing WebStorm 11 as my preferred IDE. However, I've encountered an issue where WebStorm does not seem to recognize the writeHead method: var http = require("http"); http.cre ...

What is the destination for next() in Express js?

I'm new to javascript, nodejs, and express, and facing confusion with the usage of next(). I am trying to make my code progress to the next router using next(), but it seems to be moving to the next then instead. This is what my code looks like: // ...

What is the correct way to display the date in a React application?

I am working on a project that involves integrating solidity contracts into a web portal. In one of the contracts, I have stored dates as uint values like this: 1539491531. However, when I display these dates on the web page, they appear different from wh ...

Troubleshooting a scope problem with ng-include while maintaining the original template

I have a select box within my template that has the following structure: <form name="myForm" class="fixed-select"> <select name="repeatSelect" id="repeatSelect" ng-model="selectedItem"> <option ng-repeat="program in pro ...

Struggling to display the array after adding a new item with the push method

Seeking assistance in JavaScript as a newcomer. I have written some code to print an array once a new item is added, but unfortunately, it's not displaying the array. I am puzzled as there are no errors showing up in the console either. In my code, I ...

Angular.js $resource output

I noticed an unusual behavior with Angular $resource. Take a look at the code below: class Service constructor: ($resource) -> service = $resource '/record/:id' Service::list = (cb) -> s ...

Is it feasible to convert a Google Drive spreadsheet into JSON format without needing the consent screen?

I'm working on incorporating a JSON feed directly from a private spreadsheet (accessible only via link) onto my website. In order to do this, I must create a new auth token using OAuth 2.0, which is not an issue. However, the Google Sheets API v4 mand ...

Tips for getting a plugin to function properly when the page is refreshed in Nuxt app

I am currently incorporating the vue GAPI plugin into my project. While it functions smoothly when navigating between pages, I encounter an error upon refreshing: vue-gapi.common.js?15fd:241 Uncaught (in promise) Error: gapi not initialized at GoogleAuth ...

Issue with Accessing Subdomain Cookies on Express Backend Using CORS and Cookie-Parser

I am currently tackling a challenge in my MERN (MongoDB, Express, React, Node.js) application related to receiving cookies from subdomains in my Express backend. Despite implementing CORS and cookie handling successfully for a simple localhost origin, I am ...