{"id":20393357,"url":"https://github.com/foxitsoftware/foxitpdfsdkforweb-vue3-example","last_synced_at":"2026-02-12T11:47:29.280Z","repository":{"id":185739129,"uuid":"641681291","full_name":"foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example","owner":"foxitsoftware","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-14T07:47:57.000Z","size":392,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-14T08:32:29.527Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-17T00:26:37.000Z","updated_at":"2025-06-14T07:48:00.000Z","dependencies_parsed_at":"2024-06-23T11:40:50.565Z","dependency_job_id":"174d78c3-d931-4a1b-96dd-d933c2259cae","html_url":"https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example","commit_stats":null,"previous_names":["foxitsoftware/foxitpdfsdkforweb-vue3-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Vue3-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Vue3-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Vue3-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Vue3-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxitsoftware","download_url":"https://codeload.github.com/foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxitsoftware%2FFoxitPDFSDKForWeb-Vue3-Example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272942395,"owners_count":25019329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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:22.178Z","updated_at":"2026-02-12T11:47:24.261Z","avatar_url":"https://github.com/foxitsoftware.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FoxitPDFSDK for Web Example - Vue3\n\nThese guides have the following sections:\n\n- [Part 1: How to run this example](#part-1-how-to-run-this-example)\n- [Part 2: How to use FoxitPDFSDK for Web in Vue3](#part-2-how-to-use-foxitpdfsdk-for-web-in-vue3)\n- [Part 3: Q \u0026 A](#part-3-q--a)\n\n## Prerequisites\n\n- [Node.js](https://nodejs.org/en) and [npm](https://docs.npmjs.com/getting-started)\n- @foxitsoftware/foxit-pdf-sdk-for-web-library \u003e= 9.0.0\n\n## Part 1: How to run this example\n\n### 1. Clone the repository\n\n```shell\ngit clone git@github.com:foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example.git vue3-websdk\n```\n\n### 2. Enter the directory and run npm install\n\n```shell\ncd vue3-websdk\nnpm install\n```\n\n### 3. Update the licenseSN and licenseKey values in `vue3-websdk/src/App.vue` with your own licenseSN and licenseKey that you received from sales\n\n### 4. Run project\n\n```shell\nnpm run dev\n```\n\n### 5. Start snapshot serve\n\nNavigate to `vue3-websdk/public/FoxitPDFSDKForWeb/server/snapshot`, and execute:\n\n```shell\nnpm install\nnpm run start\n```\n\n### 6. 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## Part 2: How to use FoxitPDFSDK for Web in Vue3\n\n### 1. Create project\n\nExecute the command `npm init vue@latest` and follow the wizard to complete the setup:\n\n- Project name: -\u003e vue3-websdk\n- Add TypeScript? -\u003e No\n- Add JSX Support? -\u003e No\n- Add Vue Router for Single Page Application development? -\u003e No\n- Add Pinia for state management? -\u003e No\n- Add Vitest for Unit testing? -\u003e No\n- Add Cypress for both Unit and End-to-End testing? -\u003e No\n- Add ESLint for code quality? -\u003e No\n- Add Prettier for code formatting? -\u003e No\n\n### 2. Install dependence\n\n```shell\ncd vue3-websdk\nnpm install\nnpm install @foxitsoftware/foxit-pdf-sdk-for-web-library\nnpm install -D rollup-plugin-copy\n```\n\n### 3. Update `vue3-websdk/src/App.vue` to follow\n\n```vue\n\u003cscript setup\u003e\nimport '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css';\nimport * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';\nimport preloadJrWorker from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/preload-jr-worker.js';\nimport {onMounted} from 'vue';\n\nonMounted(() =\u003e {\n  const licenseSN = 'xxx';\n  const licenseKey = 'xxx';\n\n  const readyWorker = preloadJrWorker({\n    workerPath: '/FoxitPDFSDKForWeb/lib/',\n    enginePath: '../lib/jr-engine/gsdk',\n    fontPath: 'http://webpdf.foxitsoftware.com/webfonts/',\n    licenseSN: licenseSN,\n    licenseKey: licenseKey\n  });\n\n  const PDFUI = UIExtension.PDFUI;\n  const pdfui = new PDFUI({\n    viewerOptions: {\n      libPath: '/FoxitPDFSDKForWeb/lib',\n      jr: {\n        readyWorker: readyWorker\n      }\n    },\n    renderTo: '#pdf-ui',\n    appearance: UIExtension.appearances.adaptive,\n    fragments: [],\n    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?\n        '/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.mobile.js':\n        '/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.js'\n  });\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"fv__ui-nav\"\u003e\n    \u003cdiv class=\"fv__ui-nav-logo\"\u003e\n      \u003ci class=\"fv__icon-logo\"\u003e\u003c/i\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv id=\"pdf-ui\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n#pdf-ui {\n  top: 40px;\n  bottom: 0;\n  position: absolute;\n  width: 100vw;\n}\n\u003c/style\u003e\n\n```\n\n### 4. Update the licenseSN and licenseKey values in `vue3-websdk/src/App.vue` with your own licenseSN and licenseKey that you received from sales\n\n### 5. Update `vue3-websdk/vite.config.js` to follow\n\n```js\nimport { fileURLToPath, URL } from 'node:url'\n\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nimport path from 'node:path';\nimport { normalizePath } from 'vite';\nimport copy from 'rollup-plugin-copy'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue(),\n    copy({\n      targets: [\n        {\n          src: normalizePath(path.resolve(__dirname, 'node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib')),\n          dest: normalizePath(path.resolve(__dirname, 'public/FoxitPDFSDKForWeb'))\n        },\n        {\n          src: normalizePath(path.resolve(__dirname, 'node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/server')),\n          dest: normalizePath(path.resolve(__dirname, 'public/FoxitPDFSDKForWeb'))\n        }\n      ],\n      hook: 'buildStart'\n    })\n  ],\n  resolve: {\n    alias: {\n      '@': fileURLToPath(new URL('./src', import.meta.url))\n    }\n  },\n  server: {\n    proxy: {\n      '/snapshot': 'http://localhost:3002',\n    },\n    headers: {\n      'Service-Worker-Allowed': '/'\n    }\n  }\n})\n```\n\n### 6. Update `vue3-websdk/src/main.js` to remove Vue3 default style:\n\n```diff\n- import './assets/main.css'\n+ // import './assets/main.css'\n\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n```\n\n### 7. Run project\n\n```shell\nnpm run dev\n```\n\n### 8. Start snapshot serve\n\nNavigate to `vue3-websdk/public/FoxitPDFSDKForWeb/server/snapshot`, and execute:\n\n```shell\nnpm install\nnpm run start\n```\n\n## Part 3: Q \u0026 A\n\n### 1. After autoprefixer is used, a large number of logs are generated on the console. How can I solve this problem?\n\nRemove the `import '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css';` from `App.vue`，Add `\u003clink rel=\"stylesheet\" href=\"/FoxitPDFSDKForWeb/lib/UIExtension.css\"\u003e` to `index.html`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vue3-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vue3-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxitsoftware%2Ffoxitpdfsdkforweb-vue3-example/lists"}