{"id":20393363,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-angular-example","last_synced_at":"2026-03-02T13:33:52.874Z","repository":{"id":38937201,"uuid":"249602667","full_name":"foxitsoftware/FoxitPDFSDKForWeb-Angular-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:10:17.000Z","size":896,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-12T03:47:46.459Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foxitsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-24T03:22:13.000Z","updated_at":"2024-07-02T01:10:20.000Z","dependencies_parsed_at":"2024-06-24T02:29:55.986Z","dependency_job_id":"f10bca40-3075-428a-a703-5b495fbfd183","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Angular-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Angular-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Angular-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Angular-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Angular-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30004628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T12:19:43.414Z","status":"ssl_error","status_checked_at":"2026-03-02T12:19:02.215Z","response_time":60,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:48:23.239Z","updated_at":"2026-03-02T13:33:52.827Z","avatar_url":"https://github.com/foxitsoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoxitPDFSDK for Web Example - Angular.js\n\nThis guide shows two examples for angular. One introduces how to quickly run the out-of-the-box sample in FoxitPDFSDK for Web package, and the other presents a way to integrate FoxitPDFSDK for Web into an exiting Angular/cli app.\n\n## Quickly run the out-of-the-box example for Angular  \n\nThis example is built for [@angular/cli](https://www.npmjs.com/package/@angular/cli) app.\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)\n- [FoxitPDFSDK for Web](https://developers.foxit.com/products/web/)\n\n### Getting started\n\nFirst clone the repository to any location:\n\n```bash\ngit clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example.git\n```\n\nEnter `./FoxitPDFSDKForWeb-Angular-Example` and execute:\n\n```bash\ncd ./FoxitPDFSDKForWeb-Angular-Example\nnpm i\n```\n\nThis step will download all dependencies into `node_modules` folder.\n\nBesides, to correctly reference your fonts lib, duplicate the `external` folder inside SDK to `src/assets`.\n\n### Runnning the example\n\nOn the shell, execute the following command to start your application:\n\n```sh\nnpm start\n```\n\nNow you are ready to launch the app. Open your browser, navigate to `\u003chttp://localhost:4200\u003e` to load your example.\n\n## Integrate FoxitPDFSDK for Web into existing Angular project\n\nThis integration assumes you have `@Angular/cli` app installed.\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)\n- [@angular/cli](https://www.npmjs.com/package/@angular/cli)\n- [FoxitPDFSDKforWeb](https://developers.foxit.com/products/web/)\n\n### Basic setup\n\n1. Generating and serving an Angular project via a development server\n\n  ```bash\n    ng new my-angular-app\n    cd my-angular-app\n  ```\n\nLet's call the root folder of your exiting project as `AngularJS` and FoxitPDFSDK for Web as SDK.\n\n1. Install the lattest version of `@foxitsoftware/foxit-pdf-sdk-for-web-library`.\n  \n  ```bash\n    npm i -S @foxitsoftware/foxit-pdf-sdk-for-web-library\n  ```\n\n_Inside AngularJS, implement the following:_\n\n1. In the `angular.json`, update `architect/build` options of `assets`,`styles` and `extractCss`, and `architect/lint` section.\n\n   ```json\n   {\n     ...\n     \"build\": {\n       \"assets\": [\n         ...,\n         {\n            \"glob\": \"**/*\",\n            \"input\": \"node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib\",\n            \"output\": \"/foxit-lib\",\n            \"ignore\": [\"PDFViewCtrl.js\", \"PDFViewCtrl.{vendor,polyfills}.js\", \"UIExtension.*\"]\n         }\n       ],\n      \"styles\": [\n          \"node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css\",\n          \"src/styles.css\"\n        ]\n        ...\n     }\n   }\n   ```\n\n### Creating components\n\n1. In AngularJS, run\n\n   ```sh\n   ng generate component PDFViewer\n   ```\n\n   This step will create `pdfviewer`folder and related component files under `AngularJS/src/app`. Now, you need to implement the followings in `AngularJS/src/app/`.\n\n1. Place the `license-key.js` into `src/app/pdfviewer/`. You can find the license information at `SDK/examples/`.\n1. Update `src/app/pdfviewer/pdfviewer.component.ts`. For configuration details, refer to the counterpart file inside SDK.\n1. Update `src/app/app.component.html` to pass a DOM element for placing web viewer.\n\n   ```html\n   \u003cdiv\u003e\n     \u003capp-foxitpdfviewer\n       #pdfviewer\n       id=\"pdf-ui\"\n       class=\"foxit-pdf-viewer-container\"\n     \u003e\u003c/app-foxitpdfviewer\u003e\n   \u003c/div\u003e\n   ```\n\n1. Update `app.component.css` to make it look as what you preferred\n\n  ```css\n  .foxit-pdf-viewer-container {\n    display: block;\n    margin: 0 auto;\n    width: 100vw;\n    height: 100vh;\n  }\n  .foxit-pdf-viewer-app {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n  }\n  ```\n\n### Reference fonts lib\n\nIf some text in a PDF document requires a specified font to be rendered correctly, you need to specify a font loading path during initialization. In this example, you can refer to the `fontPath` configuration in `src/app/pdfviewer/pdfviewer.component.ts`. What we need to do is to copy the `external` folder in the SDK to the `src/assets` folder so that the special font can be rendered normally.\n\n### Referencing Addons\n\nIf you are integrating FoxitPDFSDK for Web into your existing Angular project, you should read this section before continue. You may want to check out [Addons](../addons/introduction.md) for detailed introductions. \n\nHere we introduce three ways to reference SDK addons for Angular project, you may choose one of them based on your needs. This [Comparison](#Addons reference methods comparison) will help you to better understand the difference of the three ways and make a choice. If you need to run multiple instances, see the second method.\n\n#### 1. Reference fragmented addons\n\nThis method was used by default in past versions before version 7.2. You should open `pdfviewer.component.ts`, write the addons under ngOnInit() as shown below:\n\n```js\nngOnInit(){\nthis.pdfui = new UIExtension.PDFUI({\n    addons: [\n        the_path_to_foxit_lib + '/uix-addons/file-property/addon.info.json',\n        the_path_to_foxit_lib + '/uix-addons/full-screen/addon.info.json',\n        // .etc\n    ],\n    // other options\n});\n}\n```\n\nWhere `the_path_to_foxit_lib` is the SDK lib folder，the path depends on the assets configuration of angular.json. For details, check out [Basic Setup](#basic-setup).\n\n#### 2. Reference allInOne.js\n\nThe allInOne.js already combines all addons, that locates in `node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/uix-addons/`. To refenece this file, open `pdfviewer.component.ts`, and update the code as follows:\n\n```js\n// ...\nimport * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';\nimport * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';\n// ...\n```\n\nUnder the ngOnInit(), pass Addons to PDFUI:\n\n```js\nthis.pdfui = new UIExtension.PDFUI({\n    addons: Addons,\n    // other options\n});\n```\n\n#### Comparions of addons reference methods \n\n|Referene method|Configuration|HTTP Requests|Modifiable (e.g Localization resoures, and addon.info.json)|\n|--|--|--|--|\n|Fragmentized|No|n+|Yes|\n|Modularized|Configure gulp|0|Yes,but should re-merge the addons after modification |\n|allInOne.js|No|1|No|\n\nNote: You can rebuild allInOne.js by using our [Addons merge tools](http://webviewer-demo.foxitsoftware.com/docs/developer-guide/ui-extension/addons/introduction.html#merge-addons)\n\n### Reference the `Service-Worker-Allowed` HTTP header\n\nStarting from FoxitPDFSDK for Web version `10.0.0`, since service worker is used, it is necessary to add this field in the HTTP response header of the Service Worker script. Its value is the maximum allowed scope path:\n\n```http\nService-Worker-Allowed /;\n```\n\n#### Nginx\n\nIf you are using Nginx as your server, you can add the `Service-Worker-Allowed` response header by modifying the Nginx configuration file. Below is an example configuration：\n\n```nginx\nserver {\n    location /sw.js {\n        add_header Service-Worker-Allowed /;\n    }\n}\n```\n\n#### Dev Server\n\nIn local development, you can add `Service-Worker-Allowed` response headers to `projects.websdk-angular-boilerplate.architect.serve.options` in `angular.json` file. The following is a configuration example：\n\n```json\n{\n   \"headers\": {\n      \"Service-Worker-Allowed\": \"/\"\n   }\n}\n```\n\n### Running your Application\n\nOn the Shell, run\n\n```sh\nnpm start\n```\n\nAwsome, all are made ready. In your browser, go to \u003chttp://localhost:4200\u003e to load your application.\n\n### Notice\n\nAngular 9.0.0 and the later version modified the default tsconfig.json configuration: `strict=true`, you should add the following parameters in `tsconfig.json` to make the example run correctly:\n\n```json\n\"compilerOptions\": {\n  \"allowJs\": true,\n  \"allowSyntheticDefaultImports\": true,\n  \"noImplicitAny\": false,\n}\n```\n\nFor more information, check out: \u003chttps://github.com/angular/angular/pull/34798\u003e\nand the changelog: \u003chttps://github.com/angular/angular/blob/master/CHANGELOG.md#user-content-900-2020-02-06\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-angular-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-angular-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-angular-example/lists"}