FoxitPDFSDK for Web Example - Vue.js

This 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.

Quickly run the out-of-the-box example for Vue.js

FoxitPDFSDK for Web provides a boilerplate project for @vue/cli app.

Overview the project structure

.
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── components
│   │   └── PDFViewer.vue
│   ├── license-key.js
│   ├── main.js
│   └── preload.js
└── vue.config.js

Key directory and files descriptions

File/Folder	Description
src/	Contains all source files for the app.
src/components/PDFViewer.vue/	Contains the initilization plugins for FoxitPDFSDK for Web.
src/preload.js	This entry point used to preload SDK core assets.
vue.config.js	Project configuration
package.json	Lists dependencies, version build information and ect.

Prerequisites

• Nodejs and npm
• FoxitPDFSDK for Web

Getting started

Clone the repository to any location:

git clone https://github.com/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example.git

Navigate to FoxitPDFSDKForWeb-VueJS-Example/, and execute:

cd ./FoxitPDFSDKForWeb-VueJS-Example
npm install

This step will download all dependencies into node_modules folder.

Place the license-key.js into ./src. You can find the license information at SDK/examples/

Runnning the example

npm start

Now you are ready to launch the app. Open your browser, navigate to <http://127.0.0.1:9103/> to load your example.

Reference the fonts

If 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.

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:

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：

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：

// webpack.config.js
module.exports = {
    // 其他配置
    devServer: {
        headers: {
            'Service-Worker-Allowed': '/'
        }
    }
};

vue.config.js 配置示例

If you use Vue CLI, you can adjust the Webpack Dev Server by modifying vue.config.js. The following is a configuration example：

// vue.config.js
module.exports = {
    devServer: {
        headers: {
            'Service-Worker-Allowed': '/'
        }
    }
};

Integrate FoxitPDFSDK for Web into existing Vue.js project

This integration assumes you have @vue/cli app installed with all default settings.

Prerequisites

• Nodejs and npm
• @vue/cli
• FoxitPDFSDK for Web

Setup

1. Create a Vue app, based on Vue 2.x

  vue create my-vue-app
  cd my-vue-app

Let's call the root folder of your exiting project as VueJS and FoxitPDFSDK for Web as SDK.

1. Install the lattest version of @foxitsoftware/foxit-pdf-sdk-for-web-library.

  npm i -S @foxitsoftware/foxit-pdf-sdk-for-web-library

1. To correctly reference your fonts lib, duplicate the external folder inside SDK to ./public.

2. Run npm i -D cross-env to install cross-env, and add the following segments to serve and build in ./package.json.

   "scripts": {
    "start": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development vue-cli-service serve",
    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production vue-cli-service build",
   }

   The purpose of this step is to void memory leak error.

Configuration

Add configurations onto the following files in your VueJS:

• vue.config.js
• .eslintignore

For the configuration details, refer to the counterpart files in SDK.

Component

• Create src/components/PDFViewer.vue in your VueJS，and reference it in src/App.vue.

For the configuration details, refer to the counterpart files in SDK.

Referene Addons

If 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 for detailed introductions.

Here 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.

1. Reference fragmented addons

This method was used by default in past versions before version 7.2. You should open PDFViewer.vue , and referece addons as shown below:

this.pdfui = new UIExtension.PDFUI({
    addons: [
        the_path_to_foxit_lib + '/uix-addons/file-property/addon.info.json',
        the_path_to_foxit_lib + '/uix-addons/full-screen/addon.info.json',
        // .etc
    ],
    // other options
});

Where the_path_to_foxit_lib is the SDK lib folder，

2. Import modular addons

1. Install

   npm i -D @foxitsoftware/addon-loader

2. Update vue.config.js，you may refer to ./vue.config.js

3. InPDFViewer.vue, import addon.info.json for each addon:

       import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'
       import filePropertyAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/file-property/addon.info.json';
       import multiMediaAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/multi-media/addon.info.json';
       import passwordProtectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/password-protect/addon.info.json';
       import redactionAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/redaction/addon.info.json';
       import pathObjectsAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/path-objects/addon.info.json';
       import printAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/print/addon.info.json';
       import fullScreenAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/full-screen/addon.info.json';
       import importFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/import-form/addon.info.json';
       import exportFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/export-form/addon.info.json';
       import undoRedoAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/undo-redo/addon.info.json';
       import textObjectAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/text-object/addon.info.json';
       import thumbnailAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/thumbnail/addon.info.json';
       import formDesignerAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-designer/addon.info.json';
       import formToSheetAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/form-to-sheet/addon.info.json';
       import readAloudAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/read-aloud/addon.info.json';
       import hContinuesAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/h-continuous/addon.info.json';
       import RecognitionFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/recognition-form/addon.info.json';
       import pageTemplateAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/page-template/addon.info.json';
       import xfaFormAddon from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/xfa-form/addon.info.json';

   And pass addons to the PDFUI constructor:

   const libPath = '/foxit-lib/';
       this.pdfui = new UIExtension.PDFUI({
           addons: [
               filePropertyAddon,
               multiMediaAddon,
               passwordProtectAddon,
               redactionAddon,
               pathObjectsAddon,
               printAddon,
               fullScreenAddon,
               importFormAddon,
               exportFormAddon,
               undoRedoAddon,
               thumbnailAddon,
               formToSheetAddon,
               readAloudAddon,
               hContinuesAddon,
               RecognitionFormAddon,
               pageTemplateAddon,
               xfaFormAddon
           ].concat(
               // text-object addon is disabled on mobile platform
               UIExtension.PDFViewCtrl.DeviceInfo.isMobile
                   ? []
                   : [
                       textObjectAddon, 
                       formDesignerAddon
                   ]
           ),
           // other options
       });

3. Reference allInOne.js

The 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:

// ...
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library'
import * as Addons from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/uix-addons/allInOne.js';
// ...

And pass parameters to the PDFUI constructor:

const MOBILE_UNSUPPORTED_ADDONS = [
    'textEditObject', 'FormDesigner'
];
this.pdfui = new UIExtension.PDFUI({
    addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile
        ? Addons.filter(it => MOBILE_UNSUPPORTED_ADDONS.indexOf(it.getName()) === -1)
        : Addons,
    // other options
});

Comparions of addons reference methods

Referene method	Configuration	HTTP Requests	Modifiable (e.g Localization resoures, and addon.info.json)
Fragmentized	No	n+	Yes
Modularized	Configure gulp	0	Yes,but should re-merge the addons after modification
allInOne.js	No	1	No

Note: You can rebuild allInOne.js by using our Addons merge tools

Running your application

npm start

Now everything is set up. Open your browser, input the address based on you set up to launch your application.