当前位置：首页 > news >正文

前端实现在线预览excel文件

news 2025/7/9 1:16:47

在前端开发中，经常会遇到需要在线预览各种文件的需求。本文将介绍如何使用前端技术实现在线预览 Excel 文件的功能。

一、基于微软office服务的excel预览

获取要预览的 Excel 文件的 URL（例如存储在 OneDrive 或 SharePoint 上的文件）。

使用 Office Online 的嵌入代码。可以在网页中使用以下类似的 HTML 结构：

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=<Excel 文件 URL>" frameBorder={0}
/>

另外需要支持下载的话，还可以在src链接后加上wdDownloadButton属性：

    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=<Excel 文件 URL>&wdDownloadButton=True" frameBorder={0}/>

预览效果如下：

在这里插入图片描述

微软office的在线预览服务，不仅可以预览excel，还支持word、ppt等Office文件等在线预览，如果对预览要求不是很高的话，这是一个比较低成本低实现方式。

二、使用 LuckyExcel、Luckysheet 的 Excel 预览

Luckysheet库的在线预览excel，我觉得是相对还原度比较高的，在试用其他几个常见的开源库后，发现他们对excel文件中存在图表形式内容的还原存在问题，而Luckysheet库还原是比较好的。

1. 安装LuckyExcel、Luckysheet

安装LuckyExcel：

npm i LuckyExcel
Luckysheet不存在npm包，需要通过script标签去通过远程url引入：

在html文件中引入：

  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' /><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2. 在文件中引入

import LuckyExcel from 'luckyexcel';

Luckysheet库因为是script引入的，可以通过window.Luckysheet来使用，为避免ts报错，需要定义全局变量

declare global {interface Window {luckysheet: any;};
};

3. 在线预览excel文件

在日常的业务中，预览的excel有2种场景：

在线的excel url链接
通过后端流式接口请求的excel数据

所以我们通过接口将response转为buffer格式，来兼容2种形式场景：

fetch("example.xlsx").then(res => {return res.arrayBuffer();}).then(buffer => {// 转为blob格式，以备后面下载使用const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });//可以将blob对象保存起来 需要在外层定义好`downloadFile`变量downloadFile = blob;LuckyExcel.transformExcelToLucky(buffer, function (exportJson, luckysheetfile) {exportJson.sheets[0].zoomRatio = 1;console.log("exportJson", exportJson);console.log("window.luckysheet", window.luckysheet);if (window.luckysheet && window.luckysheet.create) {window.luckysheet?.create({container: "excel", //luckysheet is the container idlang: 'zh',showtoolbar: false,//是否显示工具栏showinfobar: false,//是否显示顶部信息栏showsheetbar: false,//是否显示底部sheet页按钮allowCopy: false,//是否允许拷贝allowEdit: false,//是否允许编辑// showstatisticBar: false,//是否显示底部计数栏sheetFormulaBar: false,//是否显示公示栏enableAddRow: false,//是否允许添加行enableAddBackTop: false,//是否允需回到顶部// devicePixelRatio: 10, //设置比例data: exportJson.sheets,// title: exportJson.info.name,// userInfo: exportJson.info.name.creator,hook: {workbookCreateAfter: () => {console.log("workbookCreateAfter------------");}}});}})})

luckysheet中并没有excel文件加载完毕的回调，但是可以通过hook中的workbookCreateAfter来监听文件加载完成。

luckysheet的页面配置项，可以通过官网文档来进行自由配置

luckysheet配置项

预览效果如下图所示：

在这里插入图片描述

下载excel文件函数如下：

// 下载文件const handleDownloadFile = () => {if (downloadFile) {const url = window.URL.createObjectURL(downloadFile);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = '高效机房设计计算报告.xlsx';document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);}};