Vue+SpringBoot实现Excel在线预览功能

**

问题还原：

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

解决方案：

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

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

安装js-xlsx插件：

npm install--save xlsx

JS代码如下：

importXLSXfrom'xlsx'mounted(){
    Vue.axios({
      method:'get',
      url:'/后台url地址……',
      responseType:'arraybuffer'// 注：此处需要设置哦，不然返回数据格式不对。}).then((response)=>{const workbook=XLSX.read(newUint8Array(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 iin 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样式代码如下：

<stylescoped>/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数据")publicvoidgetExcelData(HttpServletResponse response)throwsIOException{ExcelUtil.readExcelToIO("D:\\\\ExcelTest\\\\**.xlsx", response);}ExcelUtil代码如下：publicstaticvoidreadExcelToIO(String fileName,HttpServletResponse response)throwsIOException{//判断是否为excel类型文件if(!fileName.endsWith(".xls")&&!fileName.endsWith(".xlsx")){thrownewRuntimeException("所传入文件不是Excel文件！");}//读取Excel文件File excelFile=newFile(fileName.trim());InputStream inputStream=newFileInputStream(excelFile);// 构造 XSSFWorkbook 对象，strPath 传入文件路径Workbook workbook=null;//获取Excel工作薄if(excelFile.getName().endsWith("xlsx")){
          workbook=newXSSFWorkbook(inputStream);}else{
          workbook=newHSSFWorkbook(inputStream);}if(workbook==null){thrownewRuntimeException("Excel文件有问题,请检查！");}// 读取第一个sheet页表格内容Sheet sheet= workbook.getSheetAt(0);OutputStream os= response.getOutputStream();ByteArrayOutputStream baos=newByteArrayOutputStream();
workbook.write(baos);// 返回数据到输出流对象中
os.write(baos.toByteArray());
      os.flush();
      os.close();}