How to build a Vue.js Excel (XLS and XLSX) viewer

In this blog post, you’ll learn how to build a Vue.js Excel viewer using Nutrient Web SDK. You’ll open and view XLS or XLSX files directly in your web browser using client-side processing (no server required).

The image below shows what you’ll be building.

You can check out the demo to see it in action.

Opening and rendering Office documents in the browser

Nutrient Web SDK brings support for Word, Excel, and PowerPoint formats to your application, without you or your users needing any MS Office software, MS Office licenses, or third-party open source software. The technology works by converting an Office document to PDF directly in the browser, which is then rendered in our JavaScript viewer.

Unlocking more capabilities with Office-to-PDF conversion

​​By converting an Office document to PDF using client-side JavaScript, you have the option to support a rich array of additional Office document functionality, such as:

• Text editing — Edit text directly in the displayed Office document.
• Page manipulation — Organize documents by adding, removing, or rearranging pages.
• Annotations — Boost collaboration by adding text highlights, comments, or stamps.
• Adding signatures — Draw, type, or upload a signature directly to an Office document.

Requirements to get started

To get started, you’ll need:

• Git(opens in a new tab)
• Node.js(opens in a new tab) (version 18 or later recommended)
• A package manager for installing the Vue command-line interface (CLI) and importing packages — you can use npm(opens in a new tab) or Yarn(opens in a new tab)

Installing the Vue CLI

To work with Vue.js, you need to install the Vue CLI(opens in a new tab), which is standard tooling for Vue.js. It helps you create, build, and run Vue.js applications.

You can install the CLI using npm(opens in a new tab), which comes with Node.js, or yarn(opens in a new tab):

npm install -g @vue/cli

yarn global add @vue/cli

You can check the version of Vue by running the following:

vue --version

This tutorial uses Vue CLI version 5 or later.

Creating the project

Now, it’s time to integrate Nutrient into your Vue.js project.

1. Vue CLI provides an easy way of creating projects using the following command:

   vue create nutrient-vue-project

   Here, you’re using the create option with the name of the project you want to create (nutrient-vue-project).

   It’ll then ask some configuration questions.

2. Select Default (Vue 3) ([Vue 3] babel, eslint) from the list.

   

3. Now, change the directory to nutrient-vue-project:

   cd nutrient-vue-project

Adding Nutrient

1. Install @nutrient-sdk/viewer as a dependency with npm or yarn:

   npm install @nutrient-sdk/viewer

   yarn add @nutrient-sdk/viewer

2. The Nutrient SDK uses private class methods, which require Babel plugins to transpile correctly. Install the required Babel plugins:

   npm install -D @babel/plugin-transform-private-methods @babel/plugin-transform-class-properties @babel/plugin-transform-private-property-in-object

   yarn add -D @babel/plugin-transform-private-methods @babel/plugin-transform-class-properties @babel/plugin-transform-private-property-in-object

3. Update your babel.config.js file to include these plugins:

   module.exports = {
     presets: ['@vue/cli-plugin-babel/preset'],
     plugins: [
       '@babel/plugin-transform-private-methods',
       '@babel/plugin-transform-class-properties',
       '@babel/plugin-transform-private-property-in-object',
     ],
   };

4. Now you can start building your Vue.js project. First, create a js directory under the public directory. Go to your terminal and run the following:

   mkdir -p public/js

5. Copy the Nutrient Web SDK library assets to the public/js directory:

cp -R ./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib public/js/nutrient-viewer-lib

This will copy the nutrient-viewer-lib directory from within node_modules/ into the public/js/ directory to make it available to the SDK at runtime.

Displaying an Excel document

1. Add an Excel (XLS, XLSX) document you want to display to the public directory. You can use our demo document as an example.

2. Add a component wrapper for the Nutrient library and save it as src/components/NutrientContainer.vue:

   <template>
     <div class="doc-container"></div>
   </template>
   
   <script>
   import NutrientViewer from '@nutrient-sdk/viewer';
   
   export default {
     name: 'NutrientContainer',
     /**
      * The component receives the `excelFile` prop, which is of type `String` and is required.
      */
     props: {
       excelFile: {
         type: String,
         required: true,
       },
     },
     /**
      * We wait until the template has been rendered to load the document into the library.
      */
     mounted() {
       this.loadNutrient().then((instance) => {
         this.$emit('loaded', instance);
       });
     },
     /**
      * We watch for `excelFile` prop changes and trigger unloading and loading when there's a new document to load.
      */
     watch: {
       excelFile(val) {
         if (val) {
           this.loadNutrient();
         }
       },
     },
     /**
      * Our component has the `loadNutrient` method. This unloads and cleans up the component and triggers document loading.
      */
     methods: {
       async loadNutrient() {
         NutrientViewer.unload('.doc-container');
         return NutrientViewer.load({
           // To access the `excelFile` from props, use `this` keyword.
           document: this.excelFile,
           container: '.doc-container',
         });
       },
     },
   
     /**
      * Clean up when the component is unmounted so it's ready to load another document (not needed in this example).
      */
     beforeUnmount() {
       NutrientViewer.unload('.doc-container');
     },
   };
   </script>
   
   <style scoped>
   .doc-container {
     height: 100vh;
   }
   </style>

   Here’s what’s happening in the component:

   • The template section is rendering a div with the doc-container class. This will help you declaratively bind the rendered DOM to the underlying component instance’s data.
   • The script section is defining a Vue.js instance named NutrientContainer and creating methods for mounting, loading, and unloading Excel files into the doc-container.
   • The style section is defining the height of the container.

3. Now, replace the contents of src/App.vue with the following:

   <template>
     <div id="app">
       <label for="file-upload" class="custom-file-upload">
         Open Excel
       </label>
       <input
         id="file-upload"
         type="file"
         @change="openDocument"
         class="btn"
       />
       <NutrientContainer :excelFile="excelFile" @loaded="handleLoaded" />
     </div>
   </template>
   
   <script>
   import NutrientContainer from '@/components/NutrientContainer.vue';
   
   export default {
     data() {
       return {
         excelFile: '/chart.xlsx',
       };
     },
     /**
      * Render the `NutrientContainer` component.
      */
     components: {
       NutrientContainer,
     },
     /**
      * Our component has two methods — one to check when the document is loaded, and the other to open the document.
      */
     methods: {
       handleLoaded(instance) {
         console.log('Nutrient has loaded: ', instance);
         // Do something.
       },
   
       openDocument(event) {
         // To access the Vue instance data properties, use `this` keyword.
         if (this.excelFile) {
           window.URL.revokeObjectURL(this.excelFile);
         }
         this.excelFile = window.URL.createObjectURL(
           event.target.files[0],
         );
       },
     },
   };
   </script>
   
   <style>
   #app {
     text-align: center;
     color: #2c3e50;
   }
   
   body {
     margin: 0;
   }
   
   input[type='file'] {
     display: none;
   }
   
   .custom-file-upload {
     border: 1px solid #ccc;
     border-radius: 4px;
     display: inline-block;
     padding: 6px 12px;
     cursor: pointer;
     background: #4a8fed;
     padding: 10px;
     color: #fff;
     font: inherit;
     font-size: 16px;
     font-weight: bold;
   }
   </style>

   • In the template section, you have a file upload input and the NutrientContainer component.
   Vue.js uses directives to handle some types of functionality. For the input field, you’re using the v-on directive to attach an event listener to the element. In this case, it’s the change event. There’s a shortcut to v-on that removes the keyword and uses an @ symbol instead.

   v-on:change="openDocument"
   v-on:loaded="handleLoaded"
   // Or
   @change="openDocument"
   @loaded="handleLoaded"

   Similar to the input field, for the NutrientContainer component, you’re using the v-bind directive to bind the excelFile property to the excelFile property of the component and attaching an event listener for the loaded event:

   <NutrientContainer :excelFile="excelFile" @loaded="handleLoaded" />

   • In the script section, you can see the implementation of the handleLoaded and openDocument methods. There’s also a data function that returns the excelFile property.
   The data keeps track of reactive state within the current component. It’s always a function and returns an object. The object’s top-level properties are exposed via the component instance.

   • In the style section, there are styles for custom file input, and there are some general styles for the app.

4. Start the app:

npm run serve

yarn serve

You can see the application running on localhost:8080.

If you can’t see your Excel file rendered in the browser, make sure you actually uploaded an XLS or XLSX file inside the public directory.

In the demo application, you can open different Excel files by clicking the Open Excel button. You can add signatures, annotations, stamps, and more.

A note about fonts

In client-side web applications for Microsoft Office-to-PDF conversion, Nutrient addresses font licensing constraints through font substitutions, typically replacing unavailable fonts with their equivalents — like Arial with Noto. For precise font matching, you can provide your own fonts, embed them into source files, or designate paths to your .ttf fonts for custom solutions.

Adding even more capabilities

Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular Vue.js guides:

• Instant synchronization
• Document assembly
• Page manipulation
• Editor
• Forms
• Signatures
• Redaction
• Document security

Conclusion

In this blog post, you learned how to build an Excel viewer using Vue.js with the Nutrient SDK. It also discussed the benefits of using Nutrient Web SDK to render Office documents in the browser. If you hit any snags, don’t hesitate to reach out to our Support team for help.

You can also integrate our JavaScript Excel viewer using web frameworks like Angular and React.js. To see a list of all web frameworks, start your free trial. Or, launch our demo to see our viewer in action.

FAQ