前端实如今线预览excel文件

海哥  金牌会员 | 2025-2-20 08:09:53 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 976|帖子 976|积分 2928

在前端开发中,经常会遇到须要在线预览各种文件的需求。本文将介绍怎样使用前端技术实如今线预览 Excel 文件的功能。
一、基于微软office服务的excel预览


  • 获取要预览的 Excel 文件的 URL(比方存储在 OneDrive 或 SharePoint 上的文件)。

  • 使用 Office Online 的嵌入代码。可以在网页中使用以下雷同的 HTML 结构:
    1. <iframe
    2.     src="https://view.officeapps.live.com/op/embed.aspx?src=<Excel 文件 URL>"
    3.     frameBorder={0}
    4. />
    复制代码
别的须要支持下载的话,还可以在src链接后加上wdDownloadButton属性:
  1.     <iframe
  2.         src="https://view.officeapps.live.com/op/embed.aspx?src=<Excel 文件 URL>&wdDownloadButton=True"
  3.         frameBorder={0}
  4.     />
复制代码
预览效果如下:

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

Luckysheet库的在线预览excel,我觉得是相对还原度比较高的,在试用其他几个常见的开源库后,发现他们对excel文件中存在图表情势内容的还原存在问题,而Luckysheet库还原是比较好的。
1. 安装LuckyExcel、Luckysheet



  • 安装LuckyExcel:
    npm i LuckyExcel

  • Luckysheet不存在npm包,须要通过script标签去通过远程url引入:
在html文件中引入:

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

海哥

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表