PDF viewer integration with Example in Angular
source link: https://www.laravelcode.com/post/pdf-viewer-integration-with-example-in-angular
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
PDF viewer integration with Example in Angular
If you require to visually perceive an example of angular 11/10 ng2-pdf-viewer example. i would relish apportioning with your angular 11/10 pdf viewer example. Here you will learn angular 11/10 pdf viewer and editor. it's a simple example of angular 11/10 ng2-pdf-viewer print.
In this example, we will utilize ng2-pdf-viewer npm package to pdf file viewer in angular 11 application. we will simply install that ng2-pdf-viewer npm package and use the PdfViewerModule module to engender code.
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new myNewApp
Step 2: Install ng2-pdf-viewer npm Package
Now in this step, we need to just install ng2-pdf-viewer
in our angular application. so let's add as like bellow:
npm install ng2-pdf-viewer --save
Step 3: Import PdfViewerModule
we will import PdfViewerModule module as like bellow code:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PdfViewerModule } from 'ng2-pdf-viewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PdfViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Update Ts File
here, we need to update ts file as like bellow:
src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pdfFilePath = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}
Step 5: Update HTML File
here, we need to update html file as like bellow code:
src/app/app.component.html
<h1>Angular PDF File Viewer Example - HackTheStuff</h1>
<pdf-viewer [src]="pdfFilePath"
[render-text]="true"
style="display: block;"
></pdf-viewer>
i hope it will be help you.
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK