Vue读取Excel文件转换为Html预览，打印

---

前言

我们需要对一些Excel文件进行预览，那么可以调用第三方的接口转到别的页面进行预览，可是这样比较花费时间，而且还受到网络网速的影响。因此我们可以将Exce文件转为html的table格式或者是json格式来达到我们获取信息的目的

---

一、预览EXCEL文件

1.获取网络路径Excel文件

比如说我们有这样一个按钮，点击后让其弹个框把excel文件内的数据显示出来

<!-- 按钮 -->
<div class="pd-md">
  <mt-button @click="printTest" plain size="large">预 览</mt-button>
</div>
<!-- 弹出层 -->
<mt-popup v-model="infoShow" position="right" style="height:100%;width:100%;">
  <mt-header title="个人档案" fixed>
    <mt-button @click="infoShow = false" slot="left" icon="back">返回</mt-button>
  </mt-header>
  <div>
    <img id="img_a" src="">
    <div class="qualityAlarm-form" v-html="xdata"></div>
  </div>
</mt-popup>

然后下面是对应调用的方法（此方法不可读取excel中的图片，只能读取数据）

printTest(){
   this.infoShow = true;
    var file = null;

	// 获取一个图片，因为excel文件内的图片读取不到，所以模仿一下
    var imgurl = 'https://xxx/JM.png';
    $("#img_a").attr("src", imgurl);
    
    // 读取url的excel文件
    var url = 'https://xxx/JM.xlsx';
    $.ajax(url, {
      xhrFields: {
        responseType: 'blob' // 指定响应数据类型为blob格式
      }
    })
      .then(bolb => {
        const fileReader = new FileReader();
        let this_ = this;
        fileReader.onload = ev => {
          try {
            const data = ev.target.result;
            const workbook = XLSX.read(data, { type: "binary" });
            // workbook就是转换后的整个文件对象
            console.log(workbook)
            // 获取第一个工作表名字，一般都是第一个嘛
            const exlname = workbook.SheetNames[0];
            // 根据名字来获取第一个表的内容
            console.log(workbook.Sheets[exlname])
            // 转换为html然后可以输出看一下
            this.xdata = XLSX.utils.sheet_to_html(workbook.Sheets[exlname]);
          }
          catch (e) { console.log("EXCEL ERROR"); return false; }
        };
        fileReader.readAsBinaryString(bolb)
      }).catch(console.error);
  }
},

2.转换格式后的数据

先看一下刚刚的workbook数据

然后再看一下转换成html后的数据，好乱的亚子，看来我们需要手动调样式了

3.最终结果

因为我是在app端显示完整的信息，所以布局有限，仅仅为大家显示一下测试结果而已。大家可以根据自己的需要调整不同需求的样式。

二、打印文件

未完待续…

# 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。