searchDownload.component: CSV Download changed for search pages - link (<a> tag) added in document when service request succeeds.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@53675 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
1259f7bc48
commit
2ef3d1b2cd
|
@ -6,14 +6,17 @@ import {ReportsService} from '../../services/reports.service';
|
||||||
import {ModalLoading} from '../../utils/modal/loading.component';
|
import {ModalLoading} from '../../utils/modal/loading.component';
|
||||||
import {PiwikService} from '../../utils/piwik/piwik.service';
|
import {PiwikService} from '../../utils/piwik/piwik.service';
|
||||||
import{EnvProperties} from '../../utils/properties/env-properties';
|
import{EnvProperties} from '../../utils/properties/env-properties';
|
||||||
|
import 'rxjs/Rx' ;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'search-download',
|
selector: 'search-download',
|
||||||
template: `
|
template: `
|
||||||
<a class="uk-margin-large-right" *ngIf="totalResults > 0 && totalResults <= csvLimit">
|
<a class="uk-margin-large-right" *ngIf="totalResults > 0 && totalResults <= csvLimit">
|
||||||
<span class="clickable" (click)="downloadfile(downloadURLAPI+'?type='+type+'&format=csv'+csvParams,type+'-report-'+totalResults)">
|
<span class="clickable" (click)="downloadfile(downloadURLAPI+'?type='+type+'&format=csv'+csvParams,type+'-report-'+totalResults)">
|
||||||
|
<!--a [href]="downloadURLAPI+'s'+'?type='+type+'&format=csv'+csvParams" target="_blank"-->
|
||||||
<span aria-hidden="true" class="glyphicon glyphicon-download"></span>
|
<span aria-hidden="true" class="glyphicon glyphicon-download"></span>
|
||||||
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span> (CSV)
|
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download" ratio="1"><polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line></svg></span> (CSV)
|
||||||
|
<!--/a-->
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span class="uk-margin-large-right cursor-not-allowed" *ngIf="totalResults > csvLimit"
|
<span class="uk-margin-large-right cursor-not-allowed" *ngIf="totalResults > csvLimit"
|
||||||
|
@ -49,7 +52,7 @@ export class SearchDownloadComponent {
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.route.data
|
this.route.data
|
||||||
.subscribe((data: { envSpecific: EnvProperties }) => {
|
.subscribe((data: { envSpecific: EnvProperties }) => {
|
||||||
|
this.properties = data.envSpecific;
|
||||||
this.csvLimit = data.envSpecific.csvLimit;
|
this.csvLimit = data.envSpecific.csvLimit;
|
||||||
this.downloadURLAPI = data.envSpecific.csvAPIURL;
|
this.downloadURLAPI = data.envSpecific.csvAPIURL;
|
||||||
this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
|
this.isPiwikEnabled = data.envSpecific.enablePiwikTrack;
|
||||||
|
@ -77,6 +80,8 @@ export class SearchDownloadComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
downloadfile(url:string,filename:string){
|
downloadfile(url:string,filename:string){
|
||||||
|
//var newWindow = window.open("", "_parent");
|
||||||
|
//var newWindow = window.open();
|
||||||
console.log("Downloading file: "+ url);
|
console.log("Downloading file: "+ url);
|
||||||
this.openLoading();
|
this.openLoading();
|
||||||
this.setMessageLoading("Downloading CSV file");
|
this.setMessageLoading("Downloading CSV file");
|
||||||
|
@ -84,17 +89,37 @@ export class SearchDownloadComponent {
|
||||||
this._reportsService.downloadCSVFile(url).subscribe(
|
this._reportsService.downloadCSVFile(url).subscribe(
|
||||||
data => {
|
data => {
|
||||||
this.closeLoading();
|
this.closeLoading();
|
||||||
window.open(window.URL.createObjectURL(data),filename+".csv");
|
//window.open(window.URL.createObjectURL(data),filename+".csv");
|
||||||
|
console.info("Fill window with data for csv");
|
||||||
|
|
||||||
|
var url = window.URL.createObjectURL(data);
|
||||||
|
var a = window.document.createElement('a');
|
||||||
|
window.document.body.appendChild(a);
|
||||||
|
a.setAttribute('style', 'display: none');
|
||||||
|
a.href = url;
|
||||||
|
a.download = filename+".csv";
|
||||||
|
a.click();
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
a.remove(); // remove the element
|
||||||
|
|
||||||
|
//newWindow.location.assign(window.URL.createObjectURL(data));
|
||||||
|
|
||||||
|
//window.location.href = window.URL.createObjectURL(data);
|
||||||
|
|
||||||
if(this.isPiwikEnabled && (typeof document !== 'undefined')){
|
if(this.isPiwikEnabled && (typeof document !== 'undefined')){
|
||||||
this.downloadFilePiwikSub = this._piwikService.trackDownload(this.properties, url).subscribe();
|
this.downloadFilePiwikSub = this._piwikService.trackDownload(this.properties, url).subscribe();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log("Error downloading the file.");
|
console.log("Error downloading the file.");
|
||||||
|
//newWindow.close();
|
||||||
this.closeLoading();
|
this.closeLoading();
|
||||||
this.confirmOpenCsvError();
|
this.confirmOpenCsvError();
|
||||||
},
|
},
|
||||||
() => console.log('Completed file download.')
|
() => {
|
||||||
|
console.log('Completed file download.');
|
||||||
|
//setTimeout(function(){ newWindow.close(); }, 500);
|
||||||
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@ export class ReportsService {
|
||||||
var headers = new Headers();
|
var headers = new Headers();
|
||||||
headers.append('responseType', 'arraybuffer');
|
headers.append('responseType', 'arraybuffer');
|
||||||
return this.http.get(url)
|
return this.http.get(url)
|
||||||
.map(res => new Blob([res['_body']], { type: 'text/csv' }));
|
.map(res => new Blob([res['_body']], { type: 'text/csv' }));
|
||||||
}
|
}
|
||||||
getCSVResponse(url: string){
|
getCSVResponse(url: string){
|
||||||
var headers = new Headers();
|
var headers = new Headers();
|
||||||
|
|
Loading…
Reference in New Issue