简易Excel表与PDF预览实现

本地Excel表预览（纯前端）：

采用XLSX的插件库(npm)

是基于SheetJs的Excel分析库

npm地址：www.npmjs.com/package/xls...

npm install xlsx

原理是将excel表分析成对应的html格式(异步)

文件通过上传组件获取到对应的File格式，传给excel表处理函数file2Preview

import * as XLSX from 'xlsx';
// 返回一个异步，并且返回Excel文件读取后的结果
export const file2Preview = (file: File) => {
    return new Promise((resolve) => {
        // 读取文件流
        const reader = new FileReader()
        // 文件加载
        reader.onload = (e) => {
            const data = e.target?.result
            const workbook = XLSX.read(data, {
                    type: "binary",
                    cellDates: true,
                })
                // execl表格中的第一页
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                // 处理成html格式
                const html = XLSX.utils.sheet_to_html(worksheet)
                resolve(html)
        }
            reader.readAsBinaryString(file)//读取二进制字符串
}

返回的就是被分析成html格式的excel表

<template>
    <div v-html="html"></div>
</template>

<script setup>
    const html = ref("");
    //文件上传获取文件file
    const handleChange = async (info) => {
  html.value = await file2Preview(info.file.originFileObj);
};
</script>

简单预览：

PDF文件预览（本地与远程地址URL）：

采用vue-office/PDF的插件库

vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3

官方地址：501351981.github.io/vue-office/...

npm install @vue-office/pdf vue-demi

这个插件库支持两种预览方式，一种是给远程地址URL，另一种是给ArrayBuffer

ArrayBuffer方式

// 返回一个异步，并且PDF文件返回读取后的结果
export const pdf2Preview = (file: File) => {
    return new Promise((resolve) => {
        // 读取文件流
        const reader = new FileReader()
        // 文件加载
        reader.onload = (e) => {
            const data = e.target?.result
            resolve(data);
        }
        reader.readAsArrayBuffer(file)
    })
}

直接将ArrayBuffer传入vue-office-pdf组件中

<template>
    <vue-office-pdf v-model:src="pdf_src"  />
</template>

<script setup>
    const pdf_src = ref("");
    //文件上传获取文件file
    const handleChange = async (info) => {
        pdf_src.value = await pdf2Preview(info.file.originFileObj);
    };
</script>

简单预览：

远程地址URL方式

直接将pdf_src换成对应的远程地址就可以