无插件前端轻松实现超强 Excel 表和 PDF 预览功能！

2023-03-26 10:24:16

轻松预览 Excel 和 PDF：前端解决方案

在当今数字化的工作环境中，Excel 表和 PDF 文件 已成为不可或缺的文件格式。能够在前端轻松预览这些文档的内容可以显著提升用户体验。本文将通过使用XlsxJs 和vue-office 库，循序渐进地指导您在前端实现这一功能。

纯前端上传预览

1. 准备工作

安装XlsxJs 和vue-office 库：
```
npm install xlsxjs vue-office --save
```

2. 实现步骤

新建 Vue 项目 ：
```
vue create excel-pdf-preview
```

在 Vue 项目中使用库 ：

import { readFile } from 'xlsx';
import VueOffice from 'vue-office';

Vue.use(VueOffice);

响应文件选择事件 ：

handleExcelFileChange(event) {
  // 读取 Excel 文件
  const data = await readFile(event.target.files[0]);
  this.excelFile = data;
}

handlePdfFileChange(event) {
  // 读取 PDF 文件
  const data = await readFile(event.target.files[0]);
  this.pdfFile = data;
}

使用 vue-office 预览文件 ：

<input type="file" @change="handleExcelFileChange">
<excel-viewer :data="excelFile"></excel-viewer>

<input type="file" @change="handlePdfFileChange">
<pdf-viewer :data="pdfFile"></pdf-viewer>

运行项目 ：
```
npm run serve
```

远程地址 URL 预览

1. 准备工作

安装Axios 库：
```
npm install axios --save
```

2. 实现步骤

在 Vue 项目中使用 Axios ：

import axios from 'axios';

Vue.use(VueOffice);

响应 URL 变化事件 ：

handleExcelUrlChange(event) {
  // 获取 Excel 文件的 URL
  const url = event.target.value;

  // 获取远程文件内容
  const response = await axios.get(url, { responseType: 'arraybuffer' });

  // 读取文件内容
  const data = await readFile(response.data);
  this.excelFile = data;
}

handlePdfUrlChange(event) {
  // 获取 PDF 文件的 URL
  const url = event.target.value;

  // 获取远程文件内容
  const response = await axios.get(url, { responseType: 'arraybuffer' });

  // 读取文件内容
  const data = await readFile(response.data);
  this.pdfFile = data;
}

使用 vue-office 预览文件 ：

<input type="text" @change="handleExcelUrlChange">
<excel-viewer :data="excelFile"></excel-viewer>

<input type="text" @change="handlePdfUrlChange">
<pdf-viewer :data="pdfFile"></pdf-viewer>