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

**

问题还原：

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

解决方案：

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

    <div class="excel-view-container">
      <div
        id="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')// 获取的是HTMLConnection
        if (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