{"id":20393412,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-vuejs-example","last_synced_at":"2026-01-31T12:32:04.156Z","repository":{"id":37830610,"uuid":"249606282","full_name":"foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-02T01:30:18.000Z","size":82301,"stargazers_count":1,"open_issues_count":7,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-16T04:34:09.449Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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,"zenodo":null}},"created_at":"2020-03-24T03:44:17.000Z","updated_at":"2024-07-02T01:30:22.000Z","dependencies_parsed_at":"2023-02-08T08:46:44.652Z","dependency_job_id":"0d08712e-4f7c-4365-94f8-06f346568bf9","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-VueJS-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-VueJS-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-VueJS-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-VueJS-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-VueJS-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28942949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T12:10:04.904Z","status":"ssl_error","status_checked_at":"2026-01-31T12:09:58.894Z","response_time":128,"last_error":"SSL_read: 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:39.462Z","updated_at":"2026-01-31T12:32:04.140Z","avatar_url":"https://github.com/foxitsoftware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoxitPDFSDK for Web Example - Vue.js\n\nThis guide shows two examples. One introduces how to quickly run the out-of-the-box sample for Vue.js in FoxitPDFSDK for Web package, and the other presents a way to integrate FoxitPDFSDK for Web into an exiting Vue app.\n\n## Quickly run the out-of-the-box example for Vue.js\n\nFoxitPDFSDK for Web provides a boilerplate project for [@vue/cli](https://cli.vuejs.org/guide/) app.\n\n### Overview the project structure\n\n```bash\n.\n├── babel.config.js\n├── package.json\n├── public\n│   ├── favicon.ico\n│   └── index.html\n├── README.md\n├── src\n│   ├── App.vue\n│   ├── components\n│   │   └── PDFViewer.vue\n│   ├── license-key.js\n│   ├── main.js\n│   └── preload.js\n└── vue.config.js\n```\n\n#### Key directory and files descriptions\n\n|        File/Folder        |                                        Description                                        |\n| :----------------------- | :---------------------------------------------------------------------------------------: |\n|           src/            |                        Contains all source files for the app.                         |\n| src/components/PDFViewer.vue/ |                Contains the initilization plugins for FoxitPDFSDK for Web.                |\n|      src/preload.js       |                     This entry point used to preload SDK core assets.                     |\n|       vue.config.js        | [Project configuration](https://cli.vuejs.org/config/#vue-config-js) |\n|       package.json        |                  Lists dependencies, version build information and ect.                   |\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\nClone the repository to any location:\n\n```bash\ngit clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example.git\n```\n\nNavigate to `FoxitPDFSDKForWeb-VueJS-Example/`, and execute:\n\n```bash\ncd ./FoxitPDFSDKForWeb-VueJS-Example\nnpm install\n```\n\nThis step will download all dependencies into `node_modules` folder.\n\nPlace the `license-key.js` into `./src`. You can find the license information at `SDK/examples/`\n\n### Runnning the example\n\n```sh\nnpm start\n```\n\nNow you are ready to launch the app. Open your browser, navigate to `\u003chttp://127.0.0.1:9103/\u003e` to load your example.\n\n### Reference the fonts\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/preload.js`. What we need to do is to copy the `external` folder in the SDK to the `public` folder so that the special font can be rendered normally.\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#### Webpack Dev Server 配置示例\n\nIf you use Webpack Dev Server for local development, you can add `Service-Worker-Allowed` response headers by configuring devServer. The following is a configuration example：\n\n```js\n// webpack.config.js\nmodule.exports = {\n    // 其他配置\n    devServer: {\n        headers: {\n            'Service-Worker-Allowed': '/'\n        }\n    }\n};\n```\n\n#### vue.config.js 配置示例\n\nIf you use Vue CLI, you can adjust the Webpack Dev Server by modifying vue.config.js. The following is a configuration example：\n\n```js\n// vue.config.js\nmodule.exports = {\n    devServer: {\n        headers: {\n            'Service-Worker-Allowed': '/'\n        }\n    }\n};\n```\n\n## Integrate FoxitPDFSDK for Web into existing Vue.js project\n\nThis integration assumes you have [@vue/cli](https://cli.vuejs.org/guide/) app installed with _all default settings_.\n\n### Prerequisites\n\n- [Nodejs](https://nodejs.org/en/) and [npm](https://www.npmjs.com)\n- [@vue/cli](https://cli.vuejs.org/guide/)\n- [FoxitPDFSDK for Web](https://developers.foxit.com/products/web/)\n\n### Setup\n\n1. Create a Vue app, based on Vue 2.x\n  \n  ```bash\n    vue create my-vue-app\n    cd my-vue-app\n  ```\n\nLet's call the root folder of your exiting project as VueJS 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\n1. To correctly reference your fonts lib, duplicate the `external` folder inside SDK to `./public`.\n\n1. Run `npm i -D cross-env` to install `cross-env`, and add the following segments to `serve` and `build` in `./package.json`.\n\n   ```sh\n   \"scripts\": {\n    \"start\": \"cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development vue-cli-service serve\",\n    \"build\": \"cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production vue-cli-service build\",\n   }\n   ```\n\n   _The purpose of this step is to void memory leak error._\n\n### Configuration\n\nAdd configurations onto the following files in your VueJS:\n\n- `vue.config.js`\n- `.eslintignore`\n\nFor the configuration details, refer to the counterpart files in SDK.\n\n### Component\n\n- Create `src/components/PDFViewer.vue` in your VueJS，and reference it in `src/App.vue`.\n\nFor the configuration details, refer to the counterpart files in SDK.\n\n### Referene Addons\n\nIf you are integrating FoxitPDFSDK for Web into your existing Vue project, you should read this section before continue. You may want to check out [Addons](http://webviewer-demo.foxitsoftware.com/docs/developer-guide/ui-extension/addons/introduction.html) for detailed introductions.\n\nHere we introduce three ways to reference SDK addons for Anguar 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 third 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.vue `, and referece addons as shown below:\n\n```js\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\nWhere `the_path_to_foxit_lib` is the SDK lib folder， \n\n#### 2. Import modular addons\n\n1. Install\n\n   ```sh\n   npm i -D @foxitsoftware/addon-loader\n   ```\n\n2. Update `vue.config.js`，you may refer to `./vue.config.js`\n\n3. In`PDFViewer.vue`, import `addon.info.json` for each addon:\n\n    ```js\n        import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'\n        import filePropertyAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/file-property/addon.info.json';\n        import multiMediaAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/multi-media/addon.info.json';\n        import passwordProtectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/password-protect/addon.info.json';\n        import redactionAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/redaction/addon.info.json';\n        import pathObjectsAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/path-objects/addon.info.json';\n        import printAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/print/addon.info.json';\n        import fullScreenAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/full-screen/addon.info.json';\n        import importFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/import-form/addon.info.json';\n        import exportFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/export-form/addon.info.json';\n        import undoRedoAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/undo-redo/addon.info.json';\n        import textObjectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/text-object/addon.info.json';\n        import thumbnailAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/thumbnail/addon.info.json';\n        import formDesignerAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-designer/addon.info.json';\n        import formToSheetAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-to-sheet/addon.info.json';\n        import readAloudAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/read-aloud/addon.info.json';\n        import hContinuesAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/h-continuous/addon.info.json';\n        import RecognitionFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/recognition-form/addon.info.json';\n        import pageTemplateAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/page-template/addon.info.json';\n        import xfaFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/xfa-form/addon.info.json';\n\n    ```\n\n    And pass addons to the PDFUI constructor:\n\n    ```js\n    const libPath = '/foxit-lib/';\n        this.pdfui = new UIExtension.PDFUI({\n            addons: [\n                filePropertyAddon,\n                multiMediaAddon,\n                passwordProtectAddon,\n                redactionAddon,\n                pathObjectsAddon,\n                printAddon,\n                fullScreenAddon,\n                importFormAddon,\n                exportFormAddon,\n                undoRedoAddon,\n                thumbnailAddon,\n                formToSheetAddon,\n                readAloudAddon,\n                hContinuesAddon,\n                RecognitionFormAddon,\n                pageTemplateAddon,\n                xfaFormAddon\n            ].concat(\n                // text-object addon is disabled on mobile platform\n                UIExtension.PDFViewCtrl.DeviceInfo.isMobile\n                    ? []\n                    : [\n                        textObjectAddon, \n                        formDesignerAddon\n                    ]\n            ),\n            // other options\n        });\n    ```\n\n#### 3. Reference allInOne.js\n\nThe allInOne.js already combines all addons, which locates in `foxit-lib/uix-addons/`. To refenece this file, open `PDFViewer.vue`, and update the code as follows:\n\n```js\n// ...\nimport * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'\nimport * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';\n// ...\n```\n\nAnd pass parameters to the PDFUI constructor:\n\n```js\nconst MOBILE_UNSUPPORTED_ADDONS = [\n    'textEditObject', 'FormDesigner'\n];\nthis.pdfui = new UIExtension.PDFUI({\n    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile\n        ? Addons.filter(it =\u003e MOBILE_UNSUPPORTED_ADDONS.indexOf(it.getName()) === -1)\n        : 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### Running your application\n\n```sh\nnpm start\n```\n\nNow everything is set up. Open your browser, input the address based on you set up to launch your application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vuejs-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vuejs-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vuejs-example/lists"}