本地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>
