https://github.com/foxitsoftware/foxitpdfsdkforweb-vue3-example
https://github.com/foxitsoftware/foxitpdfsdkforweb-vue3-example
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/foxitsoftware/foxitpdfsdkforweb-vue3-example
- Owner: foxitsoftware
- Created: 2023-05-17T00:26:37.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-14T07:47:57.000Z (about 1 year ago)
- Last Synced: 2025-06-14T08:32:29.527Z (about 1 year ago)
- Language: Vue
- Size: 383 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FoxitPDFSDK for Web Example - Vue3
These guides have the following sections:
- [Part 1: How to run this example](#part-1-how-to-run-this-example)
- [Part 2: How to use FoxitPDFSDK for Web in Vue3](#part-2-how-to-use-foxitpdfsdk-for-web-in-vue3)
- [Part 3: Q & A](#part-3-q--a)
## Prerequisites
- [Node.js](https://nodejs.org/en) and [npm](https://docs.npmjs.com/getting-started)
- @foxitsoftware/foxit-pdf-sdk-for-web-library >= 9.0.0
## Part 1: How to run this example
### 1. Clone the repository
```shell
git clone git@github.com:foxitsoftware/FoxitPDFSDKForWeb-Vue3-Example.git vue3-websdk
```
### 2. Enter the directory and run npm install
```shell
cd vue3-websdk
npm install
```
### 3. Update the licenseSN and licenseKey values in `vue3-websdk/src/App.vue` with your own licenseSN and licenseKey that you received from sales
### 4. Run project
```shell
npm run dev
```
### 5. Start snapshot serve
Navigate to `vue3-websdk/public/FoxitPDFSDKForWeb/server/snapshot`, and execute:
```shell
npm install
npm run start
```
### 6. Reference the `Service-Worker-Allowed` HTTP header
Starting 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:
```http
Service-Worker-Allowed /;
```
#### Nginx 配置示例
If 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：
```nginx
server {
location /sw.js {
add_header Service-Worker-Allowed /;
}
}
```
#### Webpack Dev Server 配置示例
If 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：
```js
// webpack.config.js
module.exports = {
// 其他配置
devServer: {
headers: {
'Service-Worker-Allowed': '/'
}
}
};
```
## Part 2: How to use FoxitPDFSDK for Web in Vue3
### 1. Create project
Execute the command `npm init vue@latest` and follow the wizard to complete the setup:
- Project name: -> vue3-websdk
- Add TypeScript? -> No
- Add JSX Support? -> No
- Add Vue Router for Single Page Application development? -> No
- Add Pinia for state management? -> No
- Add Vitest for Unit testing? -> No
- Add Cypress for both Unit and End-to-End testing? -> No
- Add ESLint for code quality? -> No
- Add Prettier for code formatting? -> No
### 2. Install dependence
```shell
cd vue3-websdk
npm install
npm install @foxitsoftware/foxit-pdf-sdk-for-web-library
npm install -D rollup-plugin-copy
```
### 3. Update `vue3-websdk/src/App.vue` to follow
```vue
import '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css';
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js';
import preloadJrWorker from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/preload-jr-worker.js';
import {onMounted} from 'vue';
onMounted(() => {
const licenseSN = 'xxx';
const licenseKey = 'xxx';
const readyWorker = preloadJrWorker({
workerPath: '/FoxitPDFSDKForWeb/lib/',
enginePath: '../lib/jr-engine/gsdk',
fontPath: 'http://webpdf.foxitsoftware.com/webfonts/',
licenseSN: licenseSN,
licenseKey: licenseKey
});
const PDFUI = UIExtension.PDFUI;
const pdfui = new PDFUI({
viewerOptions: {
libPath: '/FoxitPDFSDKForWeb/lib',
jr: {
readyWorker: readyWorker
}
},
renderTo: '#pdf-ui',
appearance: UIExtension.appearances.adaptive,
fragments: [],
addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
'/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.mobile.js':
'/FoxitPDFSDKForWeb/lib/uix-addons/allInOne.js'
});
});
#pdf-ui {
top: 40px;
bottom: 0;
position: absolute;
width: 100vw;
}
```
### 4. Update the licenseSN and licenseKey values in `vue3-websdk/src/App.vue` with your own licenseSN and licenseKey that you received from sales
### 5. Update `vue3-websdk/vite.config.js` to follow
```js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'node:path';
import { normalizePath } from 'vite';
import copy from 'rollup-plugin-copy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
copy({
targets: [
{
src: normalizePath(path.resolve(__dirname, 'node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib')),
dest: normalizePath(path.resolve(__dirname, 'public/FoxitPDFSDKForWeb'))
},
{
src: normalizePath(path.resolve(__dirname, 'node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/server')),
dest: normalizePath(path.resolve(__dirname, 'public/FoxitPDFSDKForWeb'))
}
],
hook: 'buildStart'
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
proxy: {
'/snapshot': 'http://localhost:3002',
},
headers: {
'Service-Worker-Allowed': '/'
}
}
})
```
### 6. Update `vue3-websdk/src/main.js` to remove Vue3 default style:
```diff
- import './assets/main.css'
+ // import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
### 7. Run project
```shell
npm run dev
```
### 8. Start snapshot serve
Navigate to `vue3-websdk/public/FoxitPDFSDKForWeb/server/snapshot`, and execute:
```shell
npm install
npm run start
```
## Part 3: Q & A
### 1. After autoprefixer is used, a large number of logs are generated on the console. How can I solve this problem?
Remove the `import '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css';` from `App.vue`，Add `` to `index.html`.