Tabulator: Unable to download - Download type not found in database

Seeking assistance with downloading/exporting data to Excel using Tabulator (4.9) and Vue. Despite including SheetJS in my project as recommended by Tabulator's page, I am facing difficulties.

The error XLSX is not defined occurs when I use:

import 'xlsx/dist/xlsx.full.min.js'
this.tabulator.download('xlsx', 'data.xlsx')

Upon importing XLSX, the message "Download Error - No such download type found" is displayed:

import XLSX from 'xlsx/dist/xlsx.full.min.js'
this.tabulator.download(XLSX, 'data.xlsx')

I would appreciate any guidance on resolving this issue.

Thank you.

javascriptvue.jstabulator

Answer №1

It seems like your initial approach is on the right track. Make sure to call the download function and pass the xlsx string as an argument.

this.tabulator.download('xlsx', 'data.xlsx');

The problem arises because Tabulator expects the XLSX object to be located in the window object (or global object if it's a node project) since that's where the library is placed when imported from the CDN.

Therefore, in your scenario, your import should look like this:

import XLSX from 'xlsx/dist/xlsx.full.min.js';
window.XLSX = XLSX;

Answer №2

I have yet to explore the functionalities of tabulator. Perhaps revisiting its documentation might reveal any missed details. In my own experience, I have utilized vue-json-csv instead. This package can be globally imported and easily incorporated into your templates.

 <DownloadCsv :data="exportData" name="export.csv">
  <button class="mr-2">Export to csv</button>
 </DownloadCsv>

The component requires a data prop containing the json dataset you wish to export to excel, as well as a name prop that will determine the exported file's name.

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

Is ASP.NET capable of displaying an expandable grid view?

After searching online, I have yet to find a solution that meets my requirements. Currently, my DB view generates the following data: --------------------------------------------------- Company | Code | Total | Available | Used | Needed ---------------- ...

c#asp.netjavascriptgridview

Adding URL path instead of overriding it

Could someone assist me with the dynamic routing while organizing pages in folders within Storyblok? Currently, I am facing an issue where the slug folder name is being appended to all the links displayed in the header. So, when a user clicks on a blog po ...

htmlvue.jsvuejs3nuxtjs3storyblok

parallax scrolling can be a bit bumpy

While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...

javascriptjquerycssparallax

The issue arises when React child props fail to update after a change in the parent state

Here's the main issue I'm encountering: I am opening a websocket and need to read a sessionId from the first incoming message in order to use it for subsequent messages. This should only happen once. I have a child component called "processMess ...

javascriptreactjswebsocket

The compatibility issue with Internet Explorer and Arabic text is impeding the functionality of jQuery AJAX

$('#search_text').keyup(function() { var search_text = document.getElementById('search_text').value; $.ajax({ url:"jx_displayautocompletelist.php", data: 'text='+search_text, success:function(result){ $ ...

phpjavascriptjqueryajaxinternet-explorer

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

javascripthtmliframerefresh

Stop the submission of a form using jQuery based on its unique identifier

When using the jQuery Ajax function to verify if a user email exists in the database during a jQuery change event, there are two possible outcomes in the Ajax response. If the user email does exist, an error message is displayed. In this scenario, I aim ...

javascriptjqueryajaxformsvalidation

Retrieve the current timestamp within the asynchronous fetch method of NuxtJS

I encountered an issue while using NuxtJS version 2.12.2. I attempted to access $moment inside async fetch, but received the error message app.$moment is not a function. Here is the code snippet in question: pages/_key.vue <template> <div>& ...

vue.jsnuxt.js

Complete a form submission with an AJAX call

Although the server side methods are functioning correctly, there seems to be an issue with the AJAX function setting data-duplicated="false" but not triggering $this.submit();. Instead, pressing the submit button again is required in order to actually sub ...

javascriptjqueryajaxforms

Aggregating quantities of various items using Redux

I'm in the process of setting up a shopping cart using Redux. Essentially, my React code retrieves product details from a database and displays them for the user. Below is a snippet of my App.js: function GetProductsHtml() { initProducts() con ...

javascriptreactjsreduxreact-redux

Express JS routing encounters 500 error following the submission of a form button

I've been developing a unique chatbot that specializes in recommending songs based on the user's current mood. However, I've hit a roadblock when it comes to routing a response to the user after they submit their preferences through an HTML ...

javascripthtmlformsexpressfacebook-messenger-bot

Creating a reusable function for making HTTP requests in Angular

I have a scenario in my controller.js where I need to make an HTTP GET request when the page loads and when the user pulls to refresh. Currently, I find myself duplicating the $http code. Is there a way to refactor this for reusability? I'm struggling ...

javascriptangularjs

Utilize Jquery to extract the functions from a PHP file

I'm a beginner with both jQuery and PHP. Currently, I have an HTML page where I need to utilize functions from a PHP file using jQuery, and then display the results in the HTML. My goal is to count the number of files in three different directories a ...

javascriptphphtmljquery

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

The system is unable to accept the Object ID

I am encountering an issue with displaying the Object ID from MongoDB in the console in VS Code. I am trying to retrieve the Object ID for the user who is currently logged into my application. I have created a hidden input tag with an id of ObjectID. <! ...

javascriptnode.jsexpresssocket.io

Ways to swap out a React component for a different one after modifying its state

I'm relatively new to React and I am currently working on a project where I need to display a large image that takes 3-4 seconds to load. To enhance user experience, I plan to implement a loader using the ReactImage component available at https://www. ...

javascriptreactjsreact-image

I am puzzled by selenium's error message claiming there is a missing parenthesis in my JavaScript code, even though I have carefully checked and confirmed that everything is correct

I've been using this code snippet in my selenium application: container_xpath = '//a[starts-with(@href, "/direct/t/")]/../../..' def js_code(code = ""): return f"document.evaluate('{container_xpath}', ...

javascriptpythonselenium

Accessing PUT/POST/DELETE endpoints directly from the backend through the browser without the need for UI connectivity

How can PUT/POST/DELETE methods be implemented in NodeJS directly within the browser? router.put('/sync/:syncId', (req, res) => { res.send(JSON.stringify({ "status": 200, "error": false, "response": "HELL ...

javascriptnode.jsrestexpress

Storing a JWT refreshToken cookie in the response: Best practices

I'm currently in the process of using GraphQL to authenticate a user with JWT. After logging in, I receive a JSON response containing a token and an httponly cookie that stores the refresh token (Saleor-core is used on the server-side). After referri ...

vue.jscookiesgraphqljwtsaleor

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Is my question clear? Here's an example to illustrate: let string = "Test text ab/c test Test t/est ### Test/ Test t/test Test test" I want to remove / only from the line that includes ###, like so: Test text ab/c test Test t/est ### Test T ...

javascripthtmlregexstring