Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）

问题还原：

**
在做项目时，用户需要上传Excel模板，里面有对应的各种数据。我们拿到这个Excel后，定时的根据其中的数据去查对应的实时数据并进行计算，然后将实时数据和计算后的数据保存到Excel中存储到服务器上。用户在系统中可以看到Excel生成记录，点击后可以在线预览Excel。那么如何实现Excel在线预览那？
**

解决方案：

方案1：
使用Office官方自带的url，大概就是把要预览的Excel地址拼装到Office的链接后边，就可以通过生成的新链接直接访问了。
PS：由于此方案会暴露数据，涉及隐私问题，所以此方法笔者没有尝试过，如有需要请自行百度。
方案2：
通过js- xlsx插件实现，具体代码如下：
Vue相关代码如下：
定义展示组件：

<!-- Excel在线预览 --><div class="excel-view-container"><divid="excelView"v-html="excelView"></div></div>

安装js-xlsx插件：

npm install --save xlsx

JS代码如下：

import XLSX from 'xlsx'
mounted () {Vue.axios({method: 'get',url: '/后台url地址……',responseType: 'arraybuffer'// 注：此处需要设置哦，不然返回数据格式不对。}).then((response) => {const workbook = XLSX.read(new Uint8Array(response), { type: 'array' }) // 解析数据const worksheet = workbook.Sheets[workbook.SheetNames[0]] // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表this.excelView = XLSX.utils.sheet_to_html(worksheet) // 渲染this.$nextTick(function () { // DOM加载完毕后执行，解决HTMLConnection有内容但是length为0问题。this.setStyle4ExcelHtml()})}).catch((error) => {this.$message.error(error)})},
methods: {// 设置Excel转成HTML后的样式setStyle4ExcelHtml () {const excelViewDOM = document.getElementById('excelView')if (excelViewDOM) {const excelViewTDNodes = excelViewDOM.getElementsByTagName('td')// 获取的是HTMLConnectionif (excelViewTDNodes) {const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes)for (const i in excelViewTDArr) {const id = excelViewTDArr[i].id// 默认生成的id格式为sjs-A1、sjs-A2......if (id) {const idNum = id.replace(/[^0-9]/ig, '')// 提取id中的数字，即行号if (idNum && (idNum === '1' || idNum === 1)) { // 第一行标题行excelViewTDArr[i].classList.add('class4Title')}if (idNum && (idNum === '2' || idNum === 2)) { // 第二行表头行excelViewTDArr[i].classList.add('class4TableTh')}}}}}}}

Css样式代码如下：

<style scoped>/deep/ table {max-width: 100% !important;border-collapse: collapse !important;border-spacing: 0 !important;text-align: center !important;border: 0px !important;}/deep/ table tr td {/* border: 1px solid gray !important; */border-right: 1px solid gray !important;border-bottom: 1px solid gray !important;}/**整体样式 *//deep/ .excel-view-container {background-color: #FFFFFF;}/**标题样式 *//deep/ .class4Title{font-size: 22px !important;font-weight: bold !important;padding: 10px !important;}/**表格表头样式 *//deep/ .class4TableTh{/* font-size: 14px !important; */font-weight: bold !important;padding: 2px !important;background-color: #EFE4B0 !important;}
</style>

SpringBoot端相关代码如下：
Controller层代码：

@GetMapping("/getExcelData")@ApiOperation(value = "获取Excel数据")public void getExcelData(HttpServletResponse response) throws IOException {ExcelUtil.readExcelToIO ("D:\\\\ExcelTest\\\\**.xlsx", response);}
ExcelUtil代码如下：
public static void readExcelToIO(String fileName, HttpServletResponse response) throws IOException {//判断是否为excel类型文件if(!fileName.endsWith(".xls") && !fileName.endsWith(".xlsx")){throw new RuntimeException("所传入文件不是Excel文件！");}//读取Excel文件File excelFile = new File(fileName.trim());InputStream inputStream = new FileInputStream(excelFile);// 构造 XSSFWorkbook 对象，strPath 传入文件路径Workbook workbook = null;//获取Excel工作薄if (excelFile.getName().endsWith("xlsx")) {workbook = new XSSFWorkbook(inputStream);} else {workbook = new HSSFWorkbook(inputStream);}if (workbook == null) {throw new RuntimeException("Excel文件有问题,请检查！");}// 读取第一个sheet页表格内容Sheet sheet = workbook.getSheetAt(0);OutputStream os = response.getOutputStream();ByteArrayOutputStream baos = new ByteArrayOutputStream();
workbook.write(baos);// 返回数据到输出流对象中
os.write(baos.toByteArray());os.flush();os.close();}

PS：欢迎大家点赞、关注、支持。如有需要，欢迎添加博主QQ沟通交流！QQ：156587607

Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）相关推荐

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...
Java 实现word、excel、ppt、txt等办公文件在线预览功能！
大家好,我是宝哥! 如何用 Java 实现word.excel.ppt.txt等办公文件在线预览功能?本文告诉你答案! java 实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司 ...
手把手教你用 Java 实现word、excel、ppt、txt等办公文件在线预览功能！
如何用 Java 实现word.excel.ppt.txt等办公文件在线预览功能?本文告诉你答案! java 实现办公文件在线预览功能是一个大家在工作中也许会遇到的需求,网上些公司专门提供这样的服务, ...
快速实现word、excel、ppt、txt等办公文件在线预览功能（Java版）
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/weixin_40986713/ article/details/109527294 java实现办公文件在线预览功能是一个大家 ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
office 文档在线预览功能实现(word,excel,pdf,ppt等多种格式)——使用https://view.xdocin.com/view 提示文档过期——基础积累
web实现office文档在线预览功能--基础积累最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)的方式来实现. 但是如果要求是在一个弹窗 ...
Java实现在线预览功能
java实现在线预览功能,需要用到 jacob.dll jacob.jar 预览pdf所需js pdfobject.min.js 将上传文件转为pdf保存. <divclass=&quo ...
基于SpringMVC+EasyPoi，采用Excel模板方式实现Excel在线预览和导出(2021版)
一.背景:某工厂需要查看指定年度的设备维护计划,一般需要把全年72个周,每个周做哪些维护工作排班排出以及工时统计出来,在正式生成维护工单之前,需要先确认下.维护计划大概是某一周要执行哪些维护项,大概长 ...

Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）

问题还原：

解决方案：

Vue+SpringBoot实现Excel在线预览功能（PS：添加样式比较费劲）相关推荐

最新文章

热门文章