How to Build a PDF Viewer With Nuxt.js

By Elma Khandaker | 2021 Oct 20

4 min

Prerequisites

Copied to clipboard

You just need Node.js installed. That's it.

Create Your Nuxt PDF Viewer Project

Copied to clipboard

First, we run a command that will generate our project. The command will end with the name of your Nuxt viewer project.

yarn create nuxt-app myproject

Install Webviewer & Copy Resources

Copied to clipboard

Next, navigate into the folder ‘myproject’ — or the folder in which you created your Nuxt app. We will run the following command to install WebViewer resources.

npm i @pdftron/webviewer

Open the node_modules folder and navigate into the pdftron/webviewer folder. Now copy both the UI & Core folders into a new folder called ‘webviewer’ within the static folder.

static

Assets inside this folder will be simply copied and not bundled by webpack.

src

This source directory contains assets and components, the building blocks of our application.

package.json

This tells the node package manager (npm) which dependencies need to be downloaded.

Build the WebViewer Component

Copied to clipboard

Next, we add WebViewer as a component. We’ll go through each file and what you need to modify in sequence.

components/tutorial.vue

This file should be discarded since it is the file currently being displayed on the landing page.

components/WebViewer.vue

Create a new component called WebViewer.vue under /components.

<template>
  <div id='webviewer' ref='viewer'></div>
</template>

<script>
export default {
  name: 'WebViewer',
  props: {
    path: String,
    url: String
  },
  mounted: function () {
    import('@pdftron/webviewer').then(() => {

        WebViewer({
            path: '../webviewer',
            initialDoc: this.url, // replace with your own PDF file
          }, this.$refs.viewer).then((instance) => {
            // call apis here
          });
    })
  }
}
</script>

<style>
#webviewer {
  height: 100vh;
}
</style>

When WebViewer is initialized, it returns an instance of WebViewer that can be used to call a number of useful APIs for document creation, manipulation, annotation, collaboration, redaction, and more.

Learn more about WebViewer’s comprehensive functionality by diving into the documentation. In addition, WebViewer is capable of loading files from a URL, blob, file system or base64 data.

Lastly, the style section helps us apply custom CSS like width and height on the viewer’s div element, which WebViewer gets mounted on.

pages/index.vue

Here we can drop in our newly created WebViewer component.

Inside of the template section, add our WebViewer component and pass in the path to WebViewer's ‘webviewer’ folder and URL to the PDF file we want to load.

<template>
  <div id="app">
    <WebViewer :path="`${publicPath}webviewer`" url="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"/>
  </div>
</template>

Inside of the script section, let’s import the WebViewer component and declare it in the export statement.

<script>
import WebViewer from '../components/WebViewer.vue'
export default {
  name: 'app',
  components: {
    WebViewer
  },
  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  }
}
</script>

Now, in the style section, you can customize Webviewer.

<style>
html,
body {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;
  height: 100vh;
}
#webviewer{
  height: 100vh;
}
</style>

Finally, back in our terminal, we can run ‘yarn run dev’ to run the Nuxt app.

And to view the running application, navigate to http://localhost:3000!

Wrap Up

Copied to clipboard

That’s it! You should have a Nuxt PDF viewer up and running inside of your Nuxt.js application that will also let you load up and interact on all your Word, Excel, and PowerPoint files.

Download the complete working Nuxt PDF viewer sample here on GitHub.

Then, to get started with Apryse WebViewer, download a free trial. You can also visit the documentation or our comprehensive WebViewer Buyer's Guide. There, you’ll find details on WebViewer’s many supported features and more on how to customize the WebViewer UI to your desired look and feel.

If you have any questions about integrating Apryse into your project⁠—contact us or reach out to me personally via email. We’ll be more than happy to help!