vue纯前端下载excel表格

纯前端下载表格

    // 下面有两种方法，一种是json-excel另一种是xlsx
    //这两种都需要安装依赖
    
    使用json-excel需要安装依赖
    npm install vue-json-excel -S
    
    然后在main.js中引入
    import JsonExcel from 'vue-json-excel'
   Vue.component(‘downloadExcel’, JsonExcel)
   
   使用xlsx的时候也需要安装依赖
   npm i xlsx -S
   只需要在自己使用的那个vue页面引入即可
   import XLSX from ‘xlsx’
  
  // 代码部分
  
  <template>
    <div class="tableimport-top">
        <div class="table-top">表格导出测试</div>
        <div class="table-import">
            <el-button type="primary" @click="exportBtn">XLSX导出</el-button>
            <download-excel
             class = "export-excel-wrapper"
             :data = "json_data"
             :fields = "json_fields"
             name = "filename.xls">
             <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
            <van-button type="primary" @click="downloadTable">JsonExcel</van-button>
            </download-excel>
        </div>
    </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
    data() {
        return {
            json_fields: {
                "姓名": "name",    //常规字段
                "城市": "city", 
                "国家": "country", 
                "出生日期": "birthdate",
                "权利人": {
                field: "quanliren.mobeil",
                    //自定义回调函数
                callback: value => {
                  return `${value}`;
                }
            }
        },
            json_data: [
            {
              name: "张三",
              city: "成都",
              country: "中国",
              birthdate: "1978-03-15",
              quanliren: {
              "mobeil": "13568091231",
            },
           },
           ]
        }
    },
    methods: {
      // 使用json-excel模式导出数据
      downloadTable(){
            if(this.json_data && this.json_data.length>0){
                  this.$message({
                      showClose:true,
                      message:'开始导出!',
                      type:'success'
                  })
            }else{
                  this.$message({
                      showClose:true,
                      message:'下载失败!',
                      type:'error'
                  })
            }
      },
      // 生成excel的配置
      workbook2blob (workbook) {
        // 生成excel的配置项
        var wopts = {
          // 要生成的文件类型
          bookType: 'xlsx',
          // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
          bookSST: false,
          type: 'binary'
        }
        var wbout = XLSX.write(workbook, wopts)
        // 将字符串转ArrayBuffer
        function s2ab (s) {
          var buf = new ArrayBuffer(s.length)
          var view = new Uint8Array(buf)
          for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
          return buf
        }
        let buf = s2ab(wbout)
        var blob = new Blob([buf], {
          type: 'application/octet-stream'
        })
        return blob
      },
      // 将blob对象 创建bloburl,然后用a标签实现弹出下载框
      openDownloadDialog (blob, fileName) {
        if (typeof blob === 'object' && blob instanceof Blob) {
          blob = URL.createObjectURL(blob) // 创建blob地址
        }
        var aLink = document.createElement('a')
        aLink.href = blob
        // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
        aLink.download = fileName || ''
        var event
        if (window.MouseEvent) event = new MouseEvent('click')
        //   移动端
        else {
          event = document.createEvent('MouseEvents')
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        }
        aLink.dispatchEvent(event)
      },
      // xlsx的按钮点击事件
      exportBtn () {
        this.exportExcel()
      },
      // 生成excel数据
      exportExcel () {
        let sheet1data = [{ 户主:'章姗',宅基地代码: '121122', 是否发证:'是',宗地面积:221},
                          { 户主:'王一凡',宅基地代码: '121123', 是否发证:'是',宗地面积:229},
                          { 户主:'李司棋',宅基地代码: '121124', 是否发证:'是',宗地面积:223},
                          { 户主:'张怡筠',宅基地代码: '121125', 是否发证:'是',宗地面积:228},
                          { 户主:'田小七',宅基地代码: '121126', 是否发证:'是',宗地面积:227}]
        let sheet2data = [{ 宅基地使用权力人名: '张三', 手机: '13890778902',权利人类型:'事业单位',户口类型:'城市户口'},
                          { 宅基地使用权力人名: '黎晓', 手机: '13890778901',权利人类型:'事业单位',户口类型:'城市户口'},]
        let sheet3data = [{ 房屋代码: 'JK098', 房屋结构: '钢筋混凝土结构',建筑面积:600,建筑年代:'90年代',建筑层数:6,是否发证:'是',房屋状态:'正常' }, 
                          { 房屋代码: 'JK099', 房屋结构: '钢筋混凝土结构',建筑面积:800,建筑年代:'80年代',建筑层数:9,是否发证:'是',房屋状态:'正常' }, 
                          { 房屋代码: 'JK198', 房屋结构: '钢筋混凝土结构',建筑面积:200,建筑年代:'70年代',建筑层数:3,是否发证:'是',房屋状态:'危旧' }, 
                          { 房屋代码: 'JK298', 房屋结构: '钢筋混凝土结构',建筑面积:300,建筑年代:'60年代',建筑层数:2,是否发证:'是',房屋状态:'倒塌' }, 
                          { 房屋代码: 'JK398', 房屋结构: '钢筋混凝土结构',建筑面积:500,建筑年代:'90年代',建筑层数:7,是否发证:'是',房屋状态:'正常' }, 
                          { 房屋代码: 'JK498', 房屋结构: '钢筋混凝土结构',建筑面积:900,建筑年代:'90年代',建筑层数:9,是否发证:'是',房屋状态:'在建' }, ]
        var sheet1 = XLSX.utils.json_to_sheet(sheet1data)
        var sheet2 = XLSX.utils.json_to_sheet(sheet2data)
        var sheet3 = XLSX.utils.json_to_sheet(sheet3data)
        console.log(sheet1, sheet2, sheet3, 'sheet123')
        // 创建一个新的空的workbook
        var wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, sheet1, '宅基地宗地信息')
        XLSX.utils.book_append_sheet(wb, sheet2, '权利人信息')
        XLSX.utils.book_append_sheet(wb, sheet3, '房屋信息')
        const workbookBlob = this.workbook2blob(wb)
        this.openDownloadDialog(workbookBlob, '部门统计.xls')
      },
    },

}
</script>
<style>
 .tableimport-top{
    margin: 0 auto;
    width: 600px;
 }
 .table-top{
     text-align: center;
     font-size:30px;
     font-weight: bold;
     padding: 50px 0px 20px 0px;
 }
 .table-import{
      display: flex;
      width: 600px;
      justify-content: space-around;
 }
</style>