How to Preview and Print Excel Files in Vue 3 Using xlsx and vue3-print-nb

Introduction

In frontend development, there are scenarios where you need to preview and print Excel files. This article shows how to implement Excel preview and printing in Vue 3.

Preview Excel

There are two common approaches: converting the data to HTML or converting the document to images. This tutorial uses the xlsx library to parse Excel files and render them as HTML.

xlsx is a powerful spreadsheet processing library that works in browsers and Node.js.

Installation

Note that the import syntax differs between Vue 2 and Vue 3.

// Vue 2 import xlsx
import xlsx from 'xlsx'

// Vue 3 import xlsx
import * as XLSX from 'xlsx'

Usage

FileReader to read file streams

First create a FileReader object and use its readAsBinaryString method to read the file as a binary string, then handle the result in the onload callback.

Example:

// Instantiate FileReader
const reader = new FileReader()
// file is the file stream
reader.readAsBinaryString(file)

reader.onload = function () {
  const binaryStringData = reader.result
  console.log(binaryStringData)
}

Code – Vue 3 upload Excel and preview

Use Ant Design Vue's upload component to select an Excel file, then convert the worksheet to HTML with XLSX.utils.sheet_to_html and display it.

(1) Create component and add ant-design-vue upload component for file upload and preview area.

Use XLSX.utils.sheet_to_html to convert the worksheet to an HTML table string and render it on the page, preserving row‑column order.

Note the table styling:

Effect

Print Excel

Installation

yarn add vue3-print-nb

Usage

Import and register the vue3-print-nb plugin globally, then use the v-print directive on the element you want to print.

import { createApp } from 'vue'
import App from './App.vue'

import print from 'vue3-print-nb'

const app = createApp(App)
app.use(print).mount('#app')

When printing a single table, convert the worksheet to JSON with XLSX.utils.sheet_to_json , bind the data to a table, and trigger printing via the v-print directive.

Example screenshot of the template:

Script screenshot:

Effect

Summary

Excel preview : The xlsx library reads the file stream, and XLSX.utils.sheet_to_html converts it to an HTML table for online preview.

Excel printing : The vue3-print-nb library prints a specific area when the user clicks the print button; the file is parsed to JSON with XLSX.utils.sheet_to_json and printed using the v-print directive.

Hope this helps; feel free to comment with questions.