No more messing about exporting PDF, CSV, or Excel documents! ONE CLICK. Add to your page or any section, div, container etc, and simply export what you see! Including images and bullet lists, tables, text, and specify your own fonts!
DataDump Export: App Connect component with icon buttons for PDF, CSV, and Excel.
Each instance has its own target selector (e.g. #accountsReport, .reservations-panel).
Toggle Show PDF, Show CSV, and Show Excel per instance. Only the formats you need appear.
PDF exports full content (headings, prose, bullet and numbered lists, tables, and images) from the target HTML or structured payload. Output is a very good representation of the section you export (if not always pixel-perfect).
CSV and Excel export table data only (HTML <table> or markdown pipe tables in optional JSON payload).
NOW AVAILABLE IN THE NATIVE EXTENSION INSTALLER WITHIN WAPPLER!
Feedback is very welcome and if you find it useful you can Buy Me a Coffee.
For this extension especially a coffee would be kind of nice as really as is quite a commercially viable Extension much the same as Wap-Lastic... An awful lot went in to these two especially. If you do make use of it remember that hard work and effort that it took to bring this to the Community for FREE.Thank you!
Thank you for the helpful extensions you’ve released over the past few weeks!
I’m working on setting up the extension manually. I’ve created the necessary folders and files and copied the content from the Git repository. However, I’m a bit confused about a couple of steps related to the devDependencies:
Register in .wappler/project.json, runnpm install , Project Updater → **Update** , then **quit Wappler completely** and reopen
Should I add the code at the end of the hidden .wappler/project.json file as below? Or should it be added in the project.json file in the project root?
I don’t see a folder or file at the specified path in the devDependencies.
@guptast This is my custom installer for my Git versions:
Incredibly simple and well documented. Works flawlessly. However I've now added them to NPM so you can use the Wappler Extension supported route for installation.
@George
All done, now on NPM to satisfy those that rely upon it and find it easier. Would still love to see Git installation supported though. Makes sense not to put all eggs in a single basket and gives options outside of a single method.
The old SSR Extension is null and void but I can't remove it.Awaiting on NPM support for that... Wouldn't happen on Git...
My priority will always be Git first then NPM.Some of my upcoming Extensions will only be available on Git. I apologise but that is the way I prefer to publish them.
Git is just a version control Cheese, there are no dependency management there and you need those when installing usually when using also other packages.
You can also setup automatic workflow to publish to npm from github.
Mand don’t forget the npm keywords those make sure Wappler extension are found
Like I said most of this was internal, a lot still is. I'll publish some Extensions to NPM but some of our more advanced offerings will be solely on Git.
Also direct links to everything on my website. For everything else and anyone who needs a little guidance or help can tag me here on the Community and will be happy to help.
Just wanted to give you a quick update on getting this extension set up using npm. The node package has been successfully added to the package.json file. However, when I run the install node packages command in the bottom status bar, it doesn’t seem to download any extra folders or files. I’m not sure if there’s another step that needs to be taken before all the files are fully added to the project.
Created a quick installation guide for you @guptast (I've just followed it in a Project this Extension is not installed on and everything works).
DataDump Export: npm install in Wappler (step by step)
For users who added wappler-datadump-export to package.json and ran Install node packages, but do not yet see files in the project or the component in the Elements panel.
Wappler App Connect extensions use a two-step install:
| Step | What happens |
|------|----------------|
| npm install | Downloads the package into node_modules/wappler-datadump-export/ (source for the IDE). |
| Project Updater → Update | Copies JS/CSS into public/js and public/css and registers component files under extensions/app_connect/. |
If you only run the status-bar npm command, node_modules may update but public/ often stays unchanged. The browser loads scripts from public/, so exports will not work until Project Updater runs.
Full install checklist
1. Add the extension in Wappler (not only in package.json)
Open your project in Wappler.
Project → Project Settings → Extensions.
Click Add (or confirm it is listed).
Enter: wappler-datadump-export
Save project settings. Watch the output panel for extension install messages.
Wappler should add a devDependencies entry if it is not already in package.json:
Run this in the same folder as your project package.json (your Wappler project root), on your host machine:
cd /path/to/your-wappler-project
npm install
Tips:
If the project runs in Docker, run npm install where Wappler expects node_modules (often the mounted project folder on your PC, not only inside the container unless that is your normal workflow).
After npm install, you should have a folder:
node_modules/wappler-datadump-export/
3. Run Project Updater (required)
When Wappler shows Project Updater, click Update.
If it does not appear: Project → Project Updater (or the equivalent in your Wappler version).
Confirm it completes without errors.
After Update, you should see these files in your project:
| extensions/app_connect/components/ | Component registration (often a *_components.hjson fragment) |
If public/js/dmx-datadump-export.js is missing, Project Updater did not run or the extension is not registered in project settings.
4. Quit Wappler completely and reopen
Fully exit Wappler (including any tray icon), then open the project again.
The IDE reads components.hjson from node_modules after install. A full restart is required before DataDump Export appears under Mr Cheese in the Elements panel.
5. Add the component and layout requirements
In the designer, search DataDump or open group Mr Cheese.
Drop DataDump Export on your page (place it outside the div you want to export).
Set Target selector to your report container (e.g. #accountsReport).
Ensure Font Awesome is on the layout (PDF/CSV/Excel icons use fa-file-pdf, fa-file-csv, fa-file-excel).
6. Test in the browser
Preview the page. Open dev tools → Network if needed: clicking export should load pdfmake/SheetJS from CDN on first PDF/Excel use.
Quick verification
# From your Wappler project root:
ls -la node_modules/wappler-datadump-export/package.json
ls -la public/js/dmx-datadump-export.js
ls -la public/css/dmx-datadump-export.css
All three checks should succeed after steps 2 and 3.
Common problems
| Symptom | Likely cause | Fix |
|---------|----------------|-----|
| package.json updated but no new files in public/ | Project Updater not run | Step 3: Project Updater → Update |
| Component missing in Elements panel | Extension not in Project Settings, or Wappler not restarted | Steps 1 and 4 |
| Component on page but buttons do nothing | JS not in public/js | Re-run Project Updater; check browser console for 404 |
| Icons missing on buttons | No Font Awesome on layout | Add Font Awesome to the page layout |
| npm install seems to do nothing | Wrong directory or Docker-only install | Run npm install in project root on the host |
| Updated extension, panel still old | Stale node_modules | npm install wappler-datadump-export then Project Updater + full restart |
Adding the package to package.json and running Install node packages only puts the extension in node_modules. You still need to run Project Updater → Update so Wappler copies the JS/CSS into public/. Then fully quit and reopen Wappler. After that, look for DataDump Export under Mr Cheese in Elements. Check that public/js/dmx-datadump-export.js exists in your project folder.
If installed via the project installer all should go well.
Developers can add a manual trigger for file copying (which is what Wappler does automatically) for those who don't.
create a "scripts" folder and create a file called copyFiles.js in it.
copyfiles.js should contain:
const fs = require('fs-extra');
const path = require('path');
// Define Source and Destination Directories
const srcDir = path.join(__dirname, '../server_connect');
const destDir = path.join(__dirname, '../../../../extensions/server_connect');
// Get All Subdirectories in Source
const subDirs = fs.readdirSync(srcDir, { withFileTypes: true })
.filter(dirent => dirent.isDirectory())
.map(dirent => dirent.name);
// Loop Through Each Subdirectory
for (const subDir of subDirs) {
// 🛠️ Build Full Paths for Source and Destination
const srcSubDir = path.join(srcDir, subDir);
const destSubDir = path.join(destDir, subDir);
// Create Destination Folder If It Doesn’t Exist
if (!fs.existsSync(destSubDir)) {
fs.mkdirSync(destSubDir, { recursive: true });
}
// Copy Contents from Source to Destination
fs.copySync(srcSubDir, destSubDir, { overwrite: true });
}
I have tested this extension by installing it using Wappler's Extension Manager. A one click installation that automatically includes all that is required to start using the extension.
Hi @ben, thanks so much for testing the installation of this extension using Wappler’s Extension Manager! I can confirm that the extension has installed the files and packages properly, and the DataDump Export AppConnect component is available to be added in the project.
@Cheese, thank you for releasing the extension via npm, this extension will really simplify exporting data in the most common formats.
I have a question: I tried exporting dynamic data as a PDF, and it worked perfectly, but the data wasn’t formatted as it appeared on the page. The export included all the data, but it wasn’t in the right format.
Also, the CSV and XLSX exports didn’t seem to work.
Could you please give me some advice on what might be going on?
My apologies, I merely tested the installation and the included basic usage example. This is because the Wappler installation instructions did not include Wappler's Extension Manager.
Reproducing your scenario gave me the same result as yours, i.e. disregards Bootstrap's style rules.
They will only export table data. Please try that and let me know. If you want to export CSV and XLSX insure you add it to a new element that holds the table itself.
Thank you Ben for your assistance and help in qualifying all these Extension work within Wappler now. I sincerely appreciate your time! Was never my intention to go so far with this lot as really didn't think anyone was that interested and would be a niche group who wanted to install them. Suffice to say they are all now available in Wappler and can be installed in Wappler natively.
