wnabil / ngx-export-as Goto Github PK
View Code? Open in Web Editor NEWAngular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, PDF
License: MIT License
Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, PDF
License: MIT License
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:
<button (click)="exportAs('pdf')">export as pdf</button>
<button (click)="exportAs('png')">export as png</button>
Please, I need your help
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?
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?
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'
}
}
}```
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
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:
...
@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
Hello
It' really nice and easy to use it on ionic
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
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.
While exporting table data to xlsx.. Is there any possible to remove action column???
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.
Is there an option to delete unwanted page(s) from a PDF?
Export to pdf blank when hiding the table using css display property
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
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
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.
How to export Exce File with styles ?
Now,I'm use this Plug,but not with any styles .
Please Help me.
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).
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.
I tested in IE 11, the content is not exporting. It is showing error in console as "ERROR Error: Access is denied."
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.
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.
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.
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)
i think it's a matter of used font to render the characters.
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
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/
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?
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
Hi:
Where can I get ExportAsConfig options to export to PDF format?
Thanks
Hello,
Is there any way that I can't add some extra images and text in header while exporting PDF?
Thanks & Regards
Mohammed Sunely
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
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
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
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.
it's working but i need to create custom header and footer in every page. do you have any demo for the same
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
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.
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
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.
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
Add information in demo documentation about run ng build ngx-export-as
before launch ng-serve
, it doesn't work without
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.