Caution: Take heed when accessing an Excel file exported from an HTML table

I have encountered an issue while using the code below to download a file with .xls extension. Upon opening the downloaded file, I am prompted with a warning message:

The file you are trying to open, 'Statement.xls', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?

Javascript Code:

var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.ms-excel;" });
saveAs(blob, "Statement.xls");`

HTML code:

`<table id="exportable">
   <tbody>
    <tr><th>ColumnOne</th><th>ColumnTwo</th><th>ColumnThree</th></tr>
    <tr><td>row1Col1</td><td>row1Col2</td><td>row1Col3</td></tr>
    <tr><td>row2Col1</td><td>row2Col2</td><td>row2Col3</td></tr>
    <tr><td>row3Col1</td><td>row3Col2</td><td>test</td></tr>
  </tbody>
</table>`

External library:

https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js
javascriptangularjs

Answer №1

Both Office and Excel have the capability to handle two distinct file formats. These formats differ greatly internally - one being binary and the other simply a zipped XML format, which is why they have different extensions and mimetypes assigned. If you create a file using the new format but give it the old extension, Excel will raise an error.

Modify your code as follows:

var data = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
saveAs(data, "Statement.xlsx");

To deepen your understanding, consider examining your created file with a hex editor. Similar issues have been reported by others, check out this link for more information: https://github.com/eligrey/FileSaver.js/issues/139

Answer №2

Make sure to set the file type as "application/xls" when saving a file with the *.xls extension.

If the file type and extension match, you should not receive any warnings.

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

Ways to programmatically open a new tab in VueJs without requiring a button click

After receiving a successful response from Axios, I would like to open the page link in a new tab. I have searched for a solution online, but the browser is consistently blocking popups. The code below worked for me, however it is not supported in all brow ...

javascriptvue.js

Error: The node is unable to parse JSON data through the API

After loading a JSON file as a string, attempting to parse it back to JSON and send it as a response: router.get('/todos', (req,res) =>{ let todos = fs.readFile('todos.json', 'utf8',(err, data) =>{ if (err) ...

javascriptnode.jsjson

An unusual combination of '||' and '&&' occurred while utilizing babel

I've encountered an issue while building and publishing a package on npm with babel. The build process is showing me the following warning: Line 1: 'use strict' is unnecessary inside of modules strict Line 23: Unexpected mix of '| ...

javascriptreactjsnpmbabeljs

What is the process for including parameters in a javascript/jquery function?

This unique script enables you to click on a specific element without any consequences, but as soon as you click anywhere else, it triggers a fade-out effect on something else. Within the following code snippet, you can interact with elements inside $(&apo ...

javascriptjqueryparametersparam

Deploying Reverse Proxies with ExpressJS and NodeJS

I currently have 3 separate AngularJS applications, each with their own ExpressJS backend. I am wondering how to deploy all three applications in the following manner: http://myapp.com/<app1> http://myapp.com/<app2> http://myapp.com/<app3&g ...

angularjsnode.jsamazon-web-servicesexpressamazon-ec2

Generate a new core element featuring the top 10 users

In my app, I have a function that sorts users in the mobile_user table based on their earned points and assigns them a rank. This function is triggered every time an http request is made. Now, what I want to achieve is creating a new root node called lead ...

javascriptnode.jsfirebasecloudgoogle-cloud-functions

Encountering a "Uncaught TypeError: Cannot read property 'render' of undefined" error in Three.js when using an object literal

I've been working on converting my code to object literal style. While I was able to successfully create the scene, I'm encountering some issues with the animation. One specific error message that I'm getting is "Uncaught TypeError: Cannot ...

javascriptthree.jsobject-literal

Guide to swapping images on button click in HTML with dynamically changing image URLs retrieved from the server

I am a beginner in client-side scripting and new to Stack Overflow. I am looking for guidance on how to change an image within a div element upon clicking a button or anchor tag. Here is the code snippet I have written to achieve this: $scope.captchaCha ...

javascriptjqueryhtml

How to attach an event listener to an input element using Angular

I am looking to add a listener to an input element that will be triggered every time the user changes the input values. The goal is to display the current values chosen by the user. Example HTML template: <div id="idDoseLabel1" class="da ...

javascripthtmlcssangulartypescript

Error icon appearing on Material UI's Stepper Component when not needed

I am currently using the Stepper component from Material UI and attempting to make the fill of a stepper that is in its error state appear red. If you need to see the Stepper component from Material UI's documentation, you can access it https://i.sst ...

javascriptcssreactjsbootstrap-4material-ui

Communication within the intermediate scopes between the directive and the controller

In my AngularJS HTML code, I have the following: <div ng-controller="myController"> <div ng-grid="myGrid"></div> </div> The ngGrid component creates a table-like structure with a viewport, rows, and cells, each having their ow ...

javascriptangularjsangularjs-directive

Prevent angular from being executed through a JavaScript function triggered by a button click

Here is a button: <button ng-click="deleteCompany(company.id)" class="btn btn-danger" onClick="return window.confirm('This will permanently delete the entity\n Are you sure you want to delete this post?'); "> <s ...

javascriptangularjs

Is there a way to utilize Babel with Webpack while keeping the original folder structure of the source code intact?

I am currently working on a project that has a complex hierarchy as shown below: -src/ -app.js (interacts with server-side code only) -server/ -models/ -routes/ ... -client/ -views/ -scss/ - ...

javascriptnode.jswebpackecmascript-6babeljs

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

javascripthtmltypescript

Matching stroke-dashoffset in SVG between two distinct paths

I am currently working on animating stroke-dashoffset for two different paths to create a drawing effect. There are buttons provided to adjust the stroke-dashoffset values. My goal is to ensure that the filled paths align vertically as they progress. Is t ...

javascripthtmlcsssvg

"Can you provide instructions on how to start the grunt server in the dist directory rather than the app

Once I run the command grunt build to compile my AngularJS application into the dist directory, I want to test it using grunt server. However, the issue is that grunt server ends up serving all the code from the app/ directory. It's important to note ...

angularjsgruntjsyeoman

Can you list out the various settings attributes that can be used in the addButton() function of TinyMCE?

The guide is lacking clarity on this topic. name - String - The name of the button to be added. settings - Object - Object containing settings such as title, cmd, and more. What exactly does "etc" refer to? Is there a comprehensive list of all available ...

javascriptbuttonuser-interfacetinymcewysiwyg

When a task hasn't been completed within a 3-second timeframe, execute a specific block of code

I need to incorporate a promise in my code to execute angular.bootstrap() in block 2 if 3 seconds have passed and angular.bootstrap() in block 1 has not been completed. I have two separate blocks of code: // block 1: Office.initialize = function (reason) ...

javascriptjqueryangularjspromisebluebird

Using Javascript function call with multilines in Firefox user.js file

I am encountering an issue with my user.js file that sets user_prefs() for the new tab page in Firefox. When I have the function call on a single line with escaped quotes, it works perfectly fine. However, when the parameter is a multi-line string, it fail ...

javascriptjsonfirefox

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to

Within a div of fixed size, dynamically generated div elements are displayed using ng-repeat. The inner divs should adjust their size to accommodate the number of child divs present - for example, if only one div is present, it should take up 100% of the s ...

javascriptangularjs