wnabil/ngx-export-as

Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, PDF

ngx-export-as's Issues

not getting table borders while exporting as doc

i am exporting the data by its element id in "doc" format .
My data has multiple tables, so after exporting the data seems fine .

But facing some css issues,for example- table borders are not visible in doc file .

I am using angular 6.

Cannot read property 'charAt' of undefined

Followed instructions and I also cloned your demo. Demo is fine but when I started working on a new angular project and click on PDF (csv, excel, word, png is fine) it says:

ERROR TypeError: Cannot read property 'charAt' of undefined at new e (jspdf.min.js:269) at Observable._subscribe (ngx-export-as.js:153) at Observable.push.../../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) at Observable.push.../../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29) at ExportAsService.push.../../node_modules/ngx-export-as/fesm5/ngx-export-as.js.ExportAsService.save (ngx-export-as.js:45) at ExportAsComponent.push../src/app/views/reports/export-as/export-as.component.ts.ExportAsComponent.export (export-as.component.ts:33) at Object.eval [as handleEvent] (ExportAsComponent.html:76) at handleEvent (core.js:21673) at callWithDebugContext (core.js:22767) at Object.debugHandleEvent [as handleEvent] (core.js:22470)

Angular CLI: 7.1.3
Node: 9.8.0
OS: win32 x64
Angular: 7.1.3

Export to xlsx converts string to Date

my table column has value Remarks 1.

when I view my exported data in excel it shows 1/1/2001

doc/docx formats not working. ERROR: Export type is not supported

Great package, thank you.

I noticed that in my own app, as well as the current demo, the doc/docx formats produce the error listed above. The other export types seem to be working properly (at least in that they produce a download).

Cannot assign to read only propery 'className'

Hi, I'm getting an error when trying to export. Please see screenshot:

Can't export to PDF

Hello

I'm using this module to export a ngx content to pdf, but at the moment of try to export it the file isn't creating. The code is:

Module:
import { NgModule } from '@angular/core';

import { ThemeModule } from '../../@theme/theme.module';
import { SharedModule } from '../../shared/shared.module';
import { CertificadosRoutingModule, routedComponents } from './certificados-routing.module';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { ExportAsModule } from '../../../../node_modules/ngx-export-as/lib/index';
import { PruebaQrComponent } from './prueba-qr/prueba-qr.component';

@NgModule({
imports: [
ThemeModule,
SharedModule,
CertificadosRoutingModule,
NgxQRCodeModule,
ExportAsModule,
],
declarations: [
...routedComponents,
PruebaQrComponent,
],
providers: [
SharedModule,
],
})
export class CertificadosModule {
}

Component:
import { Component, OnInit } from '@angular/core';
import { ExportAsService, ExportAsConfig } from '../../../../../node_modules/ngx-export-as/lib/index';

@component({
selector: 'ngx-prueba-qr',
templateUrl: './prueba-qr.component.html',
styleUrls: ['./prueba-qr.component.scss'],
})
export class PruebaQrComponent implements OnInit {
campusvirtual = 'https://campusvirtual.udistrital.edu.co';
google = 'https://google.com.co';
config: ExportAsConfig = {
type: 'pdf',
elementId: 'mytable',
};

constructor(private exportAsService: ExportAsService) { }
exportAs(type) {
this.config.type = type;
this.exportAsService.save(this.config, 'file');
}
ngOnInit() {
}
}

HTML:

QR y PDF

<ngx-qrcode qrc-element-type="url" [qrc-value]="campusvirtual" qrc-version="3">
<ngx-qrcode qrc-element-type="url" [qrc-value]="google" qrc-version="3" qrc-errorCorrectionLevel="H">

<button (click)="exportAs('pdf')">export as pdf</button>
<button (click)="exportAs('png')">export as png</button>

Please, I need your help

pagebreak

can't understand how to fix page breaks. I have multiple pages of data but some pages break data so they remain separated into two parts on previous page and next page

Unable to install it in angular 8 project.

I am getting below error while installing it in angular 8 project:
npm ERR! code 128
npm ERR! Command failed: git submodule update -q --init --recursive
npm ERR! error: waitpid for git-submodule failed: No child processes

Margins option for PDF

I have the code below as config, and the margins are not being applied.
Am I missing something? Thank you!

    type: 'pdf',
    elementId: 'test',
    options: {
      orientation: 'landscape',
      margins: {
        top: '20',
        left: '20',
        right: '20'
      }
    }
  }```

html2pdf not defined with ssr builds

Hi,
I am getting the below error with production build

ReferenceError: html2pdf is not defined
at Object.eval (webpack:///./node_modules/jspdf/dist/jspdf.min.js?:207:16291)

yes, added in v1.3.1 please upgrade

it's working but i need to create custom header and footer in every page. do you have any demo for the same

strict mode code may not include a with statement

Angular 8 I have this "strict mode code may not include a with statement" Error when i use this library in production. So i had to remove it completely.

Export is corrupted

I'm trying to export a div that contains labels and some ngx-charts, but the resulting pdf or png is corrupted. It doesn't scale the image and therefore half of it (both width and height) is missing in the resulting pdf or png (see attachment).
My File Name (2).pdf

Adding options doesnot not seems to be working

when adding options it doesnot work (take any effect), can you provide me with a working example of adding option and also how to add header with image and footer with page number.

Export as Excel or PDF or etc, don't have a headers

we are missing here Headers setting, every page has to have a Header and we don't have much control on this plugin, that is big drawback, when we have full control on customization that will give flexibility.

run on ionic4 get error

How can we export pdf landscape view ?

How to export PDF with custom css and (foreign) images

I have html tags with custom css, multiple images (src URLs) and videos inside my DIV.
I want to export all in single PDF (with multiple pages).
What all things possible here and how to do?
I am trying to export large div but it doesn't export the complete and only exports what is displaying on screen.
And all my images are missing from exported PDF.

Not exporting in Internet Explorer (8,9,10,11)

I tested in IE 11, the content is not exporting. It is showing error in console as "ERROR Error: Access is denied."

Unable to build through npm

I tried to install this package through npm but it failed. Please let me know any of you faced the same problem or any fixes.

/ERROR START HERE/
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/eligrey/FileSaver.js.git
npm ERR!
npm ERR! undefined
npm ERR! exited with error code: 128
/ERROR END HERE/

Strict mode code may not include a with statement

I used the module before with Angular 7 and it worked as expected.
Today I tried to use it with Angular 8 project and the whole project returned an error:

"Strict mode code may not include a with statement"
Can you solve this problem for us please.

Cannot run the demo

I am trying to run the demo but I am facing this problem on ng serve step

Module not found: Error: Can't resolve 'core-js/es/array' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/date' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/function' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/map' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/math' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/number' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/object' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/parse-float' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/parse-int' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/reflect' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/regexp' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/set' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/string' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/symbol' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'
ERROR in ./src/polyfills.ts
Module not found: Error: Can't resolve 'core-js/es/weak-map' in '/Users/alaahamoudah/Documents/git/ngx-export-as/src'

I tired it in angular 7 and 8 and the same problem occur.

Date column subtracts 1 hour from the list. Excel download

Hi,
I have a excel download where i am exporting a list and one of the columns is date. For some reason all the month except current month date is showing 1 day minus. When i check the time it shows 11.00 PM previous day instead of current date 12.00 AM.
In the below example, the date shows as "07/09/2019 11:00:00PM" and it should show as "07/10/2019 12:00:00PM" . I even converted this string but the issue still remain same.
Has any one faced this issue before?

No options for removing the column formatting!!

This is no options or parameter for me to pass in for avoid auto format the data from each columns. For example, the string 0001234, it will become 1234 in excel and +621212, will become 621212 in excel. I wish there is some options to avoid the data lost.

ngx-export-as to generate PDFs file has poor resolution

Table not showing fully

Hello, I'm using ngx-export-as to generate PDFs however, the generated table in the PDF file has poor resolution and the data is cut off.

Could you help direct me to where I can fix this issue. Thanks!

How to export Exce File with styles

How to export Exce File with styles ?
Now,I'm use this Plug，but not with any styles .
Please Help me.

PDF Multiple Pages

Hello, one more time.
First, thank you for to solve before problem.
Now the problem is to generate multiple pages; that is associated whit other issue that you search a solution (canvas height). I have received the code of the html2canvas library and it's possible change the height if you modify this line:
module.exports = function(ownerDocument, containerDocument, width, height, options, x ,y) {
var documentElement = cloneNode(ownerDocument.documentElement, options.javascriptEnabled);
var container = containerDocument.createElement("iframe");

container.className = "html2canvas-container";
container.style.visibility = "hidden";
container.style.position = "fixed";
container.style.left = "-10000px";
container.style.top = "0px";
container.style.border = "0";
container.width = width;
**container.height = "1500px";**//before height;
container.scrolling = "no"; // ios won't scroll without it
containerDocument.body.appendChild(container); 

I don't know if exist one way to solve it whit your module. I would appreciate any help

Also changing the size of the sheet without affecting the library code

Remove action column

While exporting table data to xlsx.. Is there any possible to remove action column???

compatibility with mat-table

Hey. So I was going o implement this lib. everything works fine if used native table. I tried to implement it with angular 7 material mat-table and it gives me his error

//my config file
private _config: ExportAsConfig = {
    type: 'xlsx',
    elementId: 'table',
 };

// my function

exportAs() {
		this.exportAsService.save(this._config, 'myFile');
		this.exportAsService.get(this._config).subscribe(content => {
	        console.log(content);
	});
}

//<--------in template file---------->
<mat-table id="table" *ngIf="reportByMonthDataSource.length" [dataSource]="reportByMonthDataSource">
 // cotent
</mat-table>

What am I doing wrong in here

Custom Header

Hello,

Is there any way that I can't add some extra images and text in header while exporting PDF?

Thanks & Regards
Mohammed Sunely

Doc Demo

Add information in demo documentation about run ng build ngx-export-as before launch ng-serve, it doesn't work without

Problem while import { ExportAsService, ExportAsConfig } from 'ngx-export-as';

WARNING in ./node_modules/ngx-export-as/fesm5/ngx-export-as.js
451:57-73 "export 'defineInjectable' was not found in '@angular/core'

ngx-export-as.js:451 Uncaught TypeError: Object(...) is not a function
at eval (ngx-export-as.js:451)
at eval (ngx-export-as.js:453)
at Object.../../../../ngx-export-as/fesm5/ngx-export-as.js (vendor.bundle.js:5104)
at webpack_require (inline.bundle.js:55)
at eval (app.module.ts:15)
at Object.../../../../../src/app/app.module.ts (main.bundle.js:36)
at webpack_require (inline.bundle.js:55)
at eval (main.ts:16)
at Object.../../../../../src/main.ts (main.bundle.js:3802)
at webpack_require (inline.bundle.js:55)
(anonymous) @ ngx-export-as.js:451
(anonymous) @ ngx-export-as.js:453
../../../../ngx-export-as/fesm5/ngx-export-as.js @ vendor.bundle.js:5104
webpack_require @ inline.bundle.js:55
(anonymous) @ app.module.ts:15
../../../../../src/app/app.module.ts @ main.bundle.js:36
webpack_require @ inline.bundle.js:55
(anonymous) @ main.ts:16
../../../../../src/main.ts @ main.bundle.js:3802
webpack_require @ inline.bundle.js:55
1 @ main.bundle.js:3845
webpack_require @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1

Blank PDF in Ionic 4

Hello,

I've a ion-row element which has two columns, and inside of those, I have two tables. I've wrapped entire ion-row with a div and I'm trying to export to PDF. I'm getting a blank pdf with header/footer callback - which works fine.

Does this plugin will work with Ionic 4?

anyway that I can change height or width of col in excel.

Hello
It' really nice and easy to use it on ionic

1. wonder if there's a way that I can change width , height of col and row....?
2. I just implemented it on my ionic 3 project and it works very well. on web(run by ionic serve and once I click export as Ms-Excel. then xls. file is doneloaded )

but not on real mobile device.
is there a way that I can export and download to my real device on ionic project?

Thank you

Export to xls format

Hi ,

while exporting the table data into excel sheet the table data getting modified automatically.

Ex. Table is having data as '6/7' but in the excel it is coming like '6/7/2001'.

please let me know what is the issue and how i can fix it.

Thanks,
Bikas Kumar

Uncaught TypeError: Buffer is not a constructor

when i add the package in imports i get this error. my Angular configurations are as follows:
Angular CLI: 7.3.9
Node: 10.15.3
OS: linux x64
Angular:
...

Package Version

@angular-devkit/architect 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4

Delete page on PDF

Is there an option to delete unwanted page(s) from a PDF?

Export to pdf bl

Export to pdf blank when hiding the table using css display property

Export to PDF only takes viewport

Hey man, thanks so much for your library. I do understand that it's still in alpha, but I thought I'd contribute by logging an issue for you.

When I do a PDF export, the resulting PDF only contains whatever's currently visible in the window, not the entire viewport.

For example, my table has a height of 5842 pixels, but my viewport only has a height of 1188 pixels. My resulting PDF doesn't contain the whole table, but only a 1188 pixels high portion of whatever is currently scrolled to in the viewport. The rest is all cut off.

Is there a way to get it to export the whole thing? Maybe a configuration that specifies more pages or something?

Failed to run ngx-export-as repo

Hi mate,
I'll find your tool interesting that I need this in my project but I tried to run the sample but it gives me the error.
npm install
ng build
ng serve

Update for Dependency

Hi getting this warning

client:148 [WDS] Warnings while compiling. warnings @ client:148 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 client:154 ./node_modules/ngx-export-as/node_modules/@angular/core/fesm5/core.js 4982:15-36 Critical dependency: the request of a dependency is an expression warnings @ client:154 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 client:154 ./node_modules/ngx-export-as/node_modules/@angular/core/fesm5/core.js 4994:15-102 Critical dependency: the request of a dependency is an expression warnings @ client:154 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 content.min.js:2 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.

Rupee symbol not showing

Unable to download csv file when I am using rupee symbol in my html content.
Error showing failed to execute 'btoa' on 'window'. The string to be encoded contains characters outside of latin1 range. Same code when I am using for xls it works for me

not able to see all rows within the table

I have table. in that in one column i have progress-bar to show percentage value and my table consist of 5000 rows.

Now the issue is after exporting the whole table i am able see only 5 records.

please help me in that

While using your npm in my project,i facing header and footer issue.If you have any idea about it,please let me know

ExportAsConfig documentation

Hi:

Where can I get ExportAsConfig options to export to PDF format?

Thanks

Export the record of only single page

Hi,
I have multiple pages record data in table, but this library export only first page of record.
I want to export pages of data in single click.

supporting arabic language rendering

i think it's a matter of used font to render the characters.

Export to pdf blank when hiding table using css display

Hi Wnabil.
Thank you for the great work.
Export to pdf goes blank when hiding the table using css display property.

I had implemented searching, sorting and pagination on the server and noticed export displays only the data on the current page. The challenge was to display all data and not just data on the current page. Hence i thought about using a second table with all data but hiding it and export shows nothing when exporting to pdf. Kindly advice if there is a way around this.

Thanks for your help

Critical vulnerability in html-docx-js

Npm Audit reveals a couple critical vulnerabilities (1, 2) related to "prototype pollution" in the version of lodash that html-docx-js uses. Html-docx-js has an open issue requesting someone simply update lodash to the latest version, but there hasn't been any action in the html-docx-js repo since 2016.

A maintainer of another project that depends on html-docx-js was trying to find a replacement for that dependency for this reason, but seems to have had trouble finding an alternative.

No Data When Use PDF , PNG

Al Salam Alaykom ,

thanks for this great package but i have issue when export as pdf or png no data shown
but it's work good when export as excel any hint ??

Angular (7)