Category: Angular

View pdf files in ionic app

Giridhar PrakashLeave a comment

Requirement: Generate pdf stream on server side and show pdf inside ionic app.

Steps:
1. Install these two plugins file and document viewer from Ionic native

Document Viewer
File Api

2. Get the pdf stream as array buffer or blob. You need to apps proper response type to http get request.

3. Now create and show pdf file from the server response.

import {File} from '@ionic-native/file';
import { DocumentViewer } from '@ionic-native/document-viewer';
export class DocumentViewer
{
constructor(private file : File, private documentViewer: DocumentViewer)
{
}
public openDocument(document: Document)
{
if (!document)
{
this.showError("Document selected is null");
return;
}
let path "documents/"+databaseId;
let headers = new Headers({
'Accept': 'application/pdf'
});
let options = new RequestOptions({headers, responseType: ResponseContentType.ArrayBuffer});
let observableResponse = this.http.get(appConstants.apiUrl+
path, options);
observableResponse.subscribe((response: Response) => {
this.showDocument(response, document);
}, (error: any) => {
});
}
private showDocument(response: Response, document: Document)
{
let buffer = response.arrayBuffer();
let pdfBlob = new Blob([buffer], {type: 'application/pdf'});
this.file.writeFile(this.file.dataDirectory, document.databaseId+".pdf", pdfBlob, {replace: true}).then(c => {
this.documentViewer.viewDocument(this.file.dataDirectory+document.databaseId+".pdf", "application/pdf",
{print: {enabled: true}, bookmarks: {enabled: true}, email: {enabled: true}, title: document.title});
});
}
}
view raw documentViewer.ts hosted with ❤ by GitHub

Send JSON in http Get with angular and Web Api

Giridhar PrakashLeave a comment

Requirement: Need to send complex in http get request using Angular and get the JSON in Web API

Frontend
First prepare URLSearchParams object and add key value pairs.
Send the RequestOptions to Angular http service.

final url format will be
{{API-URL}}/api/folders/370/documents?filter={ 'startDate':'08/01/2005', 'endDate':'08/31/2005','currentPage': '2', 'pageLimit': '50'}

import {Http, Headers, RequestOptions, Response, ResponseContentType, URLSearchParams} from "@angular/http";
@Injectable()
export class DocumentService
{
constructor(private http: Http)
{
}
loadDocuments(folderId: number, currentPage: number) : Observable<Response>
{
let headers = new Headers({
'Content-Type' : 'application/json',
'Accept': 'application/json'
});
let requestOptions = new RequestOptions({headers});
requestOptions.params = this.getFilterData(currentPage);
let path = "folders/"+folderId+"/documents";
return this.http.get(appConstants.apiUrl+ path, requestOptions );
}
private getFilterData(currentPage: number) : any
{
let params: URLSearchParams = new URLSearchParams();
let filterValue = JSON.stringify( {currentPage: currentPage, pageLimit: 50 });
params.set('filter', filterValue);
return params;
}
}
view raw service.ts hosted with ❤ by GitHub

On the API Side
Got the query parameter and deserialize to ViewModel
Your server side ViewModel matches your JSON object sent in the request.

var filterData = Request.GetQueryNameValuePairs();
if (filterData == null || !filterData.Any())
{
throw new ArgumentException("Invalid request: search parameters are missing.");
}
var viewModel = JsonConvert.DeserializeObjectfilterData.First().Value);