A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!

Overview

πŸ’« JavaScript Object to csv, xls, pdf, doc and DOM to html generator πŸ’«

Gitter chat Software License Standard - JavaScript Style Guide npm Downloads/week install size

A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!

Demo

Please navigate to the following demo to test this library: Demo Page

Installation

You can download the latest version of ObjectExporter from the GitHub releases.

Configuration

In order use this library, follow the below steps:

  1. Download the latest release of the library from GitHub releases.

  2. Add the reference to the library in your HTML file:

<script src='<path>/objectexporter.min.js'></script>
  1. Paste the following to your JavaScript code and provide the required values as mentioned below:
objectExporter({
    exportable: <object>, // The dataset to be exported form an array of objects, it can also be the DOM name for exporting DOM to html
    type: <string>, // The type of exportable e.g. csv, xls or pdf
    headers: [{
        name: <string>, // Name of the field without space to be used internally
        alias: <string>, // The name of field which will be visualized in the export
        flex: <number> // An integer value which shows the relative width of this columns in comparison to the other columns
    }],
    fileName: <string>, // The name of the file which will be exported without the extension.
    headerStyle: <cssStyle>, // The style which needs to be applied to the column headers
    cellStyle: <cssStyle>, // The style which needs to be applied to each of the cells excluding the headers
    sheetName: <string>, // The sheet name containing the exported exportables
    documentTitle: <string>, // The document title which should be added to the printable
    documentTitleStyle: <cssStyle>, // The style which can be applied to the document header
    repeatHeader: <boolean>, // The table header repeat parameter
    columnSeparator: <char|string> // The expected column column separator in csv export
})

Aurguments description

ObjectExporter currently supports the below arguments:

Argument Data Type Required? Default Value Acceptable Values Description Applicable to
exportable array of objects yes no default [{header1: value 1, header2: value 2},..., {headern: value n, headern+1: value n+1}] This is the array containing all of the objects which need to be exported. csv, xls, pdf and doc
type string yes no default csv, xls or pdf This specifies the file type for generating the export. csv, xls, pdf and doc
headers array or array of objects (1) yes no default [{name: 'fieldName1', alias: 'fieldAlias1', flex: flex1}, {name: 'fieldName2', alias: 'fieldAlias2', flex: flex2}, ..., {name: 'fieldNamen', alias: 'fieldAliasn', flex: flexn}] This specifies the headers for the exportable. csv, xls, pdf and doc
fileName string no export any acceptable string for the file name This specifies the name for the export. csv, xls, pdf and doc
headerStyle string no font-size:16px; font-weight:bold; CSS style This specifies the style for the exported headers. xls, pdf and doc
cellStyle string no font-size:14px; CSS style This specifies the style for the exported cells. xls, pdf and doc
sheetName string no worksheet any string This specifies the sheet name for the excel file. xls
documentTitle string no test document title any string This specifies the exportable file title. pdf and doc
documentTitleStyle string no color:red; any string This specifies the style for the document title. pdf and doc
repeatHeader boolean no true any string This specifies the exportable header, whether it should be repeated accross various pages. pdf and doc
columnSeparator char/string no , any string or character This specifies the column separator in csv export csv

(1) In versions older than 3.3.0, header was defined as an array and not an array of objects. However from version 3.3.0, the library is backward-comptible, therefore array or array of objects, both are accepted.

Contribution

Any contribution is always appreciated! πŸ‘ πŸ‘ πŸ‘

In order to have this project installed in your development environment for the contribution purpose, follow the below steps:

  1. Fork this repository.

  2. Clone your forked repo. Then navigate to the downloaded folder and get the required packages for the library by:

npm install
  1. Build the library locally by:
npm run build
  1. Check test.html under the example folder to test the library:
npm install httpserver -g
httpserver

Then navigate to: http://localhost:8080/test.html

  1. Now make your changes in the library.

  2. Keep checking test.html after any changes and make sure the library is working fine. In case you add new features, feel free to add/modify tests:

  3. Once you are done, check your code style by:

npm run test

In case there are issues, please resolve them before pushing the code.

  1. Well done! now push your code and make a pull request. πŸš€

License

ObjectExporter is available under the MIT license.

Comments
  • Can we save pdf directly without showing the print preview screen

    Can we save pdf directly without showing the print preview screen

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    question 
    opened by Deepak2985 6
  • Override CSV Column Separator

    Override CSV Column Separator

    Is your feature request related to a problem? Please describe. When you export as CSV it always export as semicolon separataed values while some programs may not want this format and want to override it with comma separated values.

    Describe the solution you'd like It would be good to provide an option for CSV type to include cell separator.

    Describe alternatives you've considered We take the data out and run a manual process on it to replace all semicolons with comma but that is not ideal

    Additional context None

    enhancement 
    opened by mfsbo 5
  • CSV column Separator parameter

    CSV column Separator parameter

    Please check this and anything else required as I am editing all on github so there can be mistake or missing code. Thanks for all the help. This should close #9

    opened by farrukhsubhani 4
  • html export fails on second attempt

    html export fails on second attempt

    Describe the bug When you click on html export on example page it opens a browser print dialogue. If you cancel it and click on export button second time it gives an error in console and fails. It should open dialogue whenever export button is pressed.

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'https://gharibi.github.io/JsObjExporter/examples/example.html'
    2. Click on 'Generate PDF under HTML to PDF'
    3. A print dialogue would open with Print and Cancel options.
    4. Click on Cancel
    5. Click on 'Generate PDF under HTML to PDF' again
    6. Open Console and see errors it would show Uncaught TypeError: Cannot read property 'remove' of null on document.getElementById("testFrame").remove()

    Expected behavior There should be no errors in console.

    Screenshots If applicable, add screenshots to help explain your problem.

    Desktop (please complete the following information):

    • OS: Windows
    • Browser Chrome
    • Version 79.0.3945.117 (Official Build) (64-bit)

    Additional context I have included the js file from cdn https://www.jsdelivr.com/package/npm/object-exporter

    opened by mfsbo 4
  • Supporting IE11

    Supporting IE11

    Currently object-exporter supports the export to CSV and XLS for Chrome version 71.0.3578.98, Safari version 12.0.2 (14606.3.4), FireFox version 64.0 and Opera version 57.0.3098.76. Let's say I have tested the library on the above platforms.

    However IE11 is not supported for the both XLS and CSV exports. I had a quick look at the xls.js and the issue seem to be from here:

      let ctx = { worksheet: sheetName, table: dataset }
      let a = document.createElement('a')
      a.href = uri + base64(format(template, ctx))
      a.download = fileName + '.xls'
      a.click()
    

    Maybe there are alternatives to the above code. Alternatively window.location could be used instead of a.click(), but the problem is, then the fileName cannot be set and moreover it will cause a redirection on the page.

    help wanted 
    opened by gharibi 2
  • Export to word (.doc file)

    Export to word (.doc file)

    It will awesome to have an exporter for exporting elements/objects to Microsoft Word (.doc file).

    In order to do so, the required schema for MS word has to be identified and accordingly the HTML element has to be passed to the schema. Then after downloading the Blob with .doc extension, the file will be compatible with MS word.

    opened by gharibi 1
  • Advanced header handling

    Advanced header handling

    Currently the header attribute is supposed to be an array composed of the list of headers. In reality, header should have a field and an alias. This is quite important because the order of items in an object for the exportable are not necessarily the same and this cause a mismatch between the header and the rows.

    The header has to be defined as follows:

    headers: [{
        name: 'header_1',
        alias: 'header 1 alias',
        flex: 1
      },{
        name: 'header_2',
        alias: 'header 2 alias',
        flex: 1
      },
        . . . 
      {
        name: 'header_n',
        alias: 'header n alias',
        flex: 1
      }]
    

    Since the current version of library is in production, it is not possible to simply shut the old versions down. In other words, there must be a backward-compatible solution. Which means it should be designed in a way, not to affect the current users.

    opened by gharibi 1
  • XLS export doesn't work without the header attribute

    XLS export doesn't work without the header attribute

    When the API is called without providing the header attribute, the console logs an error and the export doesn't work:

    Uncaught TypeError: Cannot read property 'length' of null
        at objectexporter.min.js:1
        at Object.export (objectexporter.min.js:1)
        at init (objectexporter.min.js:1)
    

    The export should work even without providing the header attribute. In such cases, it should only printout the rows.

    This was detected using object-exporter version Chrome version 3.2.1 and the error occured on:

    • Chrome version 71.0.3578.98
    • Safari version 12.0.2 (14606.3.4)
    bug 
    opened by gharibi 0
  • Add stylesheet support for html type

    Add stylesheet support for html type

    Is your feature request related to a problem? Please describe. Currently exporting html type has no stylesheet support

    Describe the solution you'd like Add a parameter to support stylesheet from:

    1. url for a <link> element
    2. string for a <style> element

    Describe alternatives you've considered Include a <style> or <link> element inside the exportable DOM element, but according to the W3 specs <style> or <link> element must be included inside the <head> of the document

    Additional context

    enhancement good first issue 
    opened by dimbslmh 0
  • Export to xls failed

    Export to xls failed

    Describe the bug The export to xls failed. There are no data into the generated file.

    To Reproduce

    1. Go to the demo website
    2. Click on "Generate XLS"
    3. Open the file

    Screenshot image

    Note: I'm opening the file with LibreOffice

    question 
    opened by matthieurobin 2
  • Export Multiple Tables

    Export Multiple Tables

    I have 2 different size tables. 2 rows of 10 cells and 2 rows of 26. Is it possible to export both tables in one document? Should I build the tables manually first? Any help would be appreciated.

    question 
    opened by ridgey28 3
  • Type: β€œPDF” does not change the file name:

    Type: β€œPDF” does not change the file name:

    Type: β€œPDF” does not change the file name: No matter what is in fileName, the file name is equal to the page title. Tell me what I'm doing wrong. Thankyou.

    help wanted 
    opened by abvas 5
  • Security Alert on xls file opening

    Security Alert on xls file opening

    Describe the bug

    Security alert on xls opening

    To Reproduce Steps to reproduce the behavior:

    1. Generate an xsl file.
    2. Open it with Excel (Max OS Excel for Mac 16.21.1)
    3. You got the screenshotted alert message

    Expected behavior No error message

    Screenshots

    capture d ecran 2019-01-30 a 14 22 43 bug good first issue 
    opened by xavhan 5
Releases(v3.6.5)
  • v3.6.5(Sep 18, 2022)

    Hi there! in this version I have updated the underlaying frameworks. Some libraries were outdated and accordingly some of you had issues with your BlackDuck scan. Cheers!

    Source code(tar.gz)
    Source code(zip)
  • v3.6.4(Jan 13, 2022)

    Hi there! there was an issue in the previous version where in case there was html tag in the table cell, the exporter was facing with layout issues. This is resolved in this version.

    Source code(tar.gz)
    Source code(zip)
  • v3.6.3(Jan 12, 2022)

  • v3.6.2(Nov 2, 2020)

  • v3.6.1(Oct 31, 2020)

    Hi there! hope you are all healthy and doing fine during this Corona situation. There was an issue for while with XLS export in IE and Edge which we have resolved. Cheers!

    Source code(tar.gz)
    Source code(zip)
  • v3.6.0(Sep 21, 2020)

  • v3.5.2(Sep 6, 2020)

  • v3.5.1(May 29, 2020)

    Hi there. As you know, npm is evolving, therefore we are trying to be in sync with the latest updates in project dependencies to provide a fully functional library. In this version, we updated the project dependencies and accordingly released a new minified file. Happy coding!

    Source code(tar.gz)
    Source code(zip)
  • v3.5.0(Mar 9, 2020)

    Hi there! in this version we have the below updates:

    • Added columnSeparator: <char|string> as a new property for CSV exports to define the desired column separator.
    • Resolved the issue in printing pdf using the latest version of FireFox.

    Also special thanks to @farrukhsubhani for his assistance.

    Source code(tar.gz)
    Source code(zip)
  • v3.4.8(Jan 23, 2020)

  • v3.4.7(Jan 22, 2020)

  • v3.4.6(Jan 12, 2020)

  • v3.4.5(Nov 22, 2019)

  • v3.4.4(Oct 4, 2019)

    In this version a major functionality called repeat table headers is implemented. This will improve the visualization of the repeatables specially for the pdf and doc exports.

    Source code(tar.gz)
    Source code(zip)
  • v3.4.3(Sep 18, 2019)

    This version was an update after a few months. In this version, you can provide a document title and document title style for your export exportables.

    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Jan 20, 2019)

  • v3.3.1(Jan 14, 2019)

    In this version, advanced header handling for XLS and PDF is implemented. Now you can define a width, size and alias for each column.

    More importantly, the library is implemented as backward compatible. Meaning that, if you have been using an older version, you can still use the new library. In other words, you can use the both array of string or array of objects for the header parameter.

    As always, please write your feature requests as well as your identified bugs. Thank you! you are awesome πŸ˜‰

    Source code(tar.gz)
    Source code(zip)
  • v3.3.0(Jan 11, 2019)

    In this version, Export to PDF is added to printable types of the library. Besides:

    • The readme file is updated.
    • Example is updated.

    If you are happy with the library, please give it a star ⭐️ and if you are unhappy, report a bug, define a feature request or even better, feel free to contribute! You are awesome! πŸ˜„

    Source code(tar.gz)
    Source code(zip)
  • v3.2.2(Dec 28, 2018)

    In this version, following features have been implemented:

    • XLS export directly from the DOM elements.
    • Export to XLS without providing the header attribute.

    Moreover;

    • The readme file is updated.
    • Example is updated.
    • StandardJs is set as the default linting tool.

    Enjoy! don't forget to give me Star :thumbsup: You are awesome! :blush:

    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Dec 26, 2018)

    This release provides a well-tested and stable library for generating XLS and CSV. The library in this version is minified, unified and uglified using webpack and is compatible with ES5 standard.

    Source code(tar.gz)
    Source code(zip)
  • v3.1.4(Dec 26, 2018)

  • v3.1.2(Dec 26, 2018)

  • v3.1.0(Dec 25, 2018)

  • v3.0.0(Dec 24, 2018)

  • v2.0.0(Dec 24, 2018)

  • v1.0.0(Nov 27, 2018)

Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
Little Alpine.js plugin to add a typewriter effect to any HTML element.

⌨️ Alpine Typewriter ⌨️ An Alpine.js plugin to add a typewriter effect to any HTML element. ?? Installation CDN Include the following <script> tag in

Marc Reichel 58 Dec 28, 2022
Custom Element: interactive panorama viewer

<little-planet> This project is a Custom HTML Element (AKA Web Component) that renders an interactive view of a panoramic photo. Can be used with no J

OndΕ™ej Ε½Γ‘ra 12 Nov 25, 2022
This is a little script that shows how to ddos a website. This is for example purposes only. Don't ddos a website without the consent of his owner

Dddos-Script This is a little script to ddos a website. This is for example purposes only. I am not responsable of what you do with it If you like thi

null 13 Dec 17, 2022
An Obsidian Plugin that allows to export tables from a pane in reading mode to CSV files.

Obsidian Plugin "Table to CSV Exporter" This is my very first attempt in writing a plugin for Obsidian. I didn't even know TypeScript before (but Java

Stefan Wolfrum 26 Dec 27, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
A JavaScript library to shuffle the text content of a DOM element with an animated effect.

shuffle-letters.js A JavaScript library to shuffle the text content of a DOM element with an animated effect. NOTE: This library is a port to vanilla

George Raptis 6 Jun 2, 2022
Create DOM element and bind observables on it.

rx-domh Create DOM element and bind observables on it. Inspired by Binding.scala and react-flyd, I made this. Just a simple todo example: /** @jsx h *

xialvjun 4 Feb 6, 2018
I forgot about el.outerHTML so I made this, it takes a DOM element and returns its html as string

htmlToString Convert html/DOM element to string Works with rendered and virtual DOM Installation npm install htmltostring Or using CDN <script src="ht

Shuvo 4 Jul 22, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
A custom element for rendering stylable (light DOM) Markdown

Motivation There are many web components these days to render Markdown to HTML. Here are a few: <zero-md> <marked-element> …and I’m sure many others H

Lea Verou 252 Dec 20, 2022
Creates a table of contents in a DOM element optionally linked to with anchors. No jQuery or other dependencies.

HTML-Contents Creates a table of contents in a DOM element optionally linked to with anchors. No dependencies. @psalmody Get It We're on npm: npm i ht

Michael Tallino 3 Oct 25, 2022
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

Atomico simplifies learning, workflow and maintenance when creating webcomponents. Scalable and reusable interfaces: with Atomico the code is simpler

Atomico 898 Dec 31, 2022
Import flow for Excel (.xlsx) and CSV file with automated column matching and validation.

RSI react-spreadsheet-import ⚑️ A component used for importing XLS / XLSX / CSV documents built with Chakra UI. Import flow combines: ?? Uploader βš™οΈ P

Ugnis 123 Dec 24, 2022
🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker ?? Just enter your GitHub name and track your followings!

Youngkwon Kim 10 Jun 15, 2022
Scrape tweets from Twitter search results based on keywords and date range using Playwright. Save scraped tweets in a CSV file for easy analysis

Tweet Harvest (Twitter Crawler) Tweet Harvest is a command-line tool that uses Playwright to scrape tweets from Twitter search results based on specif

Helmi Satria 33 Aug 9, 2023
Obsidian Extract PDF Annotations Plugin

Obsidian Extract PDF Annotations Plugin This is a plugin for Obsidian. It extracts Annotations from PDF Files. Usage This Plugin visits all PDF files

null 15 Dec 22, 2022