@hmcts/document-viewer-webcomponent
This is an angular library that provides components to view and annotate PDF documents, as well as view images.
Building annotation library
- npm run package
- distributable will be created under dist/document-viewer-webcomponent
Add as a dependency in your angular app
-
add @hmcts/document-viewer-webcomponent as a dependency in package.json
-
import DocumentViewerModule and declare it in your NgModule imports.
For example:
import { DocumentViewerModule } from 'document-viewer-webcomponent';
@NgModule({
imports: [
...,
DocumentViewerModule,
]
})
-
import assets to your angular.json
{
"glob": "**/*",
"input": "node_modules/@hmcts/document-viewer-webcomponent/assets",
"output": "/assets"
}
-
and styles
"styles": [
"node_modules/@hmcts/document-viewer-webcomponent/assets/aui-styles.scss",
...
],
-
import JS dependencies as scripts within angular.json
"scripts": [
"node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf.combined.min.js",
"node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf_viewer.min.js",
"node_modules/@hmcts/document-viewer-webcomponent/assets/js/pdf-annotate.min.js"
...
]
-
component entry point:
<app-document-viewer
[baseUrl]="'http://localhost:3000/api'"
[annotate]="true"
[url]="'https://dm-store-aat.service.core-compute-aat.internal/documents/35f3714e-30e0-45d6-b4fb-08f51c271f8e'"
></app-document-viewer>
for non document store files:
<app-document-viewer
[baseUrl]="'http://localhost:3000/api'"
[annotate]="false"
[url]="'http://localhost:3000/assets/non-dm.pdf'"
[isDM]="false"
[contentType]="'pdf'">
</app-document-viewer>
Note: The file needs to be retrievable.
Running development application
- pull and start the docker containers :
az login
az acr login --name hmcts --subscription 1c4f0704-a29e-403d-b719-b90c34ef14c9
docker-compose -f docker-compose-dependencies.yml pull
docker-compose -f docker-compose-dependencies.yml up
- build and start node server
npm run build:node
npm run start:node;
- build the angular component library :
npm run package
- start angular app
npm run start:ng;
- go to http://localhost:3000 and the viewer should load the document.