Some test text!
Web / Guides / Vue
This guide will show you how to integrate WebViewer Document Viewer & Editor into a Vue application.
You can watch a step-by-step video to help you get started.
You can also download a ready-to-go sample on GitHub.
Prior to starting, you should have already installed Node and npm.
Get your Apryse trial key.
Apryse collects some data regarding your usage of the SDK for product improvement.
If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.
Clone the webviewer-vue-sample
repository:
git clone https://github.com/ApryseSDK/webviewer-vue-sample.git
Enter the directory and run npm install:
cd webviewer-vue-sample
npm install
This will automatically download and extract the Apryse WebViewer Package.
Run the application by executing:
npm run serve
Then open a browser and go to localhost:8080
to see the application.
To call more WebViewer APIs, open /www/js/index.js
in your favorite text editor and add the API calls to the callback for the WebViewer instantiation.
Add your own license key in place of 'YOUR_LICENSE_KEY':
export default {
name: 'WebViewer',
props: {
path: String,
url: String
},
mounted: function () {
WebViewer({
path: this.path,
licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
initialDoc: this.url, // replace with your own PDF file
}, this.$refs.viewer).then((instance) => {
// at this point, the viewer is 'ready'
const { Core, UI } = instance;
const { documentViewer, annotationManager, Annotations, Tools } = Core;
// See https://docs.apryse.com/documentation/web/guides/ for more info.
documentViewer.addEventListener('documentLoaded', function() {
// call methods relating to the loaded document
});
});
}
}
For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:
instance.UI.setTheme('dark');
Execute npm run serve
again and the theme of the viewer will change.
Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales