import FileSaver from 'file-saver'
import XLSXStyle from "xlsx-style";
import XLSX from 'xlsx'
 vue 2.0版本xlsx-style ./cptable' 报错:Can't resolve './cptable' in 'xxxx\nautical-front\node_modules_xlsx 
 解决办法

1根据脚手架版本不同可以在 webpack.base.conf.js 中写

module.exports = {
    externals: [ {
         './cptable': 'var cptable' 
    }]
}

也可以在vue.config.js中写

module.exports = {
    chainWebpack: config => {
        config.externals({ './cptable': 'var cptable' })
    }
}
问题所在:\node_modules\xlsx-style\dist\cpexcel.js 807行   var cpt = require('./cpt' + 'able');
修改为  var cpt = cptable  修改的只是本地文件
不推荐这种方式,因为你只是修改了自己的本地文件呢,下一次其他人进行打包或运行项目一样会报这类错误
setExlStyle(data) {
      let borderAll = {  //单元格外侧框线
        // top: {
        //   style: 'thin',
        // },
        // bottom: {
        //   style: 'thin'
        // },
        // left: {
        //   style: 'thin'
        // },
        // right: {
        //   style: 'thin'
        // }
      };
      data['!cols'] = [];
      for (let key in data) {
        // console.log(key)
        if (data[key] instanceof Object) {
          data[key].s = {
            border: borderAll,
            alignment: {
              horizontal: 'center',   //水平居中对齐
              vertical:'center'
            },
            font:{
              sz:11
            },
            bold:true,
            numFmt: 0
          }
          data['!cols'].push({wpx: 160});
        }
      }
      return data;
    },
    addRangeBorder (range, ws) {
      console.log(range)
      let cols = ["A", "B", "C", "D", "E"];
      range.forEach(item => {
        console.log(item)
        let style = {
          // s: {
          //   border: {
          //     top: { style: 'thin' },
          //     left: { style: 'thin' },
          //     bottom: { style: 'thin' },
          //     right: { style: 'thin' }
          //   }
          // }
        }
        // 处理合并行
        for (let i = item.s.c; i <= item.e.c; i++) {
          ws[`${cols[i]}${Number(item.e.r) + 1}`] = ws[`${cols[i]}${Number(item.e.r) + 1}`] || style
          // 处理合并列
          for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
            ws[cols[i] + k] = ws[cols[k] + item.e.r] || style
          }
        }
      })
      return ws;
    },
      exportExcel(){
        let ws = XLSX.utils.table_to_sheet(this.$refs['report-table'].$el)
      //创建一个workbook对象
      let wb = XLSX.utils.book_new()
      //把worksheet对象添加进workbook对象,第三个参数是excel中sheet的名字
      XLSX.utils.book_append_sheet(wb, ws, '列表')
      this.setExlStyle(wb['Sheets']['列表']); // 设置列宽 字号等 如果无需多余的样式则省略
      this.addRangeBorder(wb['Sheets']['列表']['!merges'],wb['Sheets']['列表']) //设置合并行的border
      let wb_out = XLSXStyle.write(wb, { type: 'buffer'})
      try {
        FileSaver.saveAs(new Blob([wb_out], {
          type: 'application/octet-stream'
        }), '用时用工统计表.xlsx');   // 导出的文件名
      } catch (e) {
        console.log(e, wb_out) ;
      }
      return wb_out;
      },
       rowspan(spanArr, position, spanName) {
      this.list.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.list[index][spanName] ===
            this.list[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {  
          if (columnIndex === 0) {
              const _row = this.testArr0[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
          }
          if (columnIndex === 1) {
              const _row = this.testArr1[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
          }
          if (columnIndex === 2) {
              const _row = this.testArr2[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
          }
          if (columnIndex ===3) {
              const _row = this.testArr3[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col,
              };
          }
      },
this.rowspan(this.testArr3, this.testPosition3, "num");
对应的表格
<el-table :data="list" fit border stripe
                  highlight-current-row
                  ref="report-table"
                  :span-method="objectSpanMethod"
                  @selection-change="handleSelectionChange"
                  height="100%">
 

对应导出列表

前端使用xlsx file-saver xlsx-style导出的更多相关文章

  1. How to Read, Write XLSX File in Java - Apach POI Example---reference

    No matter how Microsoft is doing in comparison with Google, Microsoft Office is still the most used ...

  2. Import Data from *.xlsx file to DB Table through OAF page(转)

    Use  Poi.jar Import Data from *.xlsx file to DB Table through OAF page Use Jxl.jar Import Data from ...

  3. 手残,盘符前边多打一个空格导致的message d:\WEB_APP_QuChongFu\file\五月.xlsx (文件名、目录名或卷标语法不正确。)

    尝试读取并解析一个excel文件,一直提示错误 但是有个原始数据,导入就没问题 对比了一下,好像也就是字母d的大小写有区别 我先把大写的D改成小写的试试,如果是大小写问题,那应该抛出异常 好吧,好像并 ...

  4. message d:\WEB_APP_QuChongFu\file\五月.xlsx (文件名、目录名或卷标语法不正确。)

    原因是 文件名或文件夹名中不能出现以下字符:\   /   :   *   ?  "  <  >   | 但是后台读取到的附件的文件路径就是这样的 网上大佬说了,这样处理 rep ...

  5. 前端网页打印插件print.js(可导出pdf)

    在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...

  6. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  7. R Graphics Cookbook 第3章 – Bar Graphs

    3.1 基本条形图 library(ggplot2) library(gcookbook) pg_mean   #这是用到的数据   group weight 1  ctrl  5.032 2  tr ...

  8. python requests 上传excel数据流

    headers=self.headers #获取导入模版 file_home = self.import_template log.info(file_home) wb = load_workbook ...

  9. java操作poi生成excel.xlsx(设置下拉框)下载本地和前端下载

    需求:导入excel表格,如果excel有错误,将错误的地方标红,在把数据以excel的形式写出,供用户下载解决方案:1.以实体类的方式接收excel并解析(创建两个集合一个接收正常的数据一个接收错误 ...

  10. 【Easyexcel】java导入导出超大数据量的xlsx文件 解决方法

    解决方法: 使用easyexcel解决超大数据量的导入导出xlsx文件 easyexcel最大支持行数 1048576. 官网地址: https://alibaba-easyexcel.github. ...

随机推荐

  1. 最好用的在线图片压缩工具——TinyPNG

    前言 不知道大家在写博客或者工作时有没有这种烦恼呢?想要上传某张图片,但却因为图片文件过大而导致无法上传.这时你可能会去百度搜索关于图片压缩的软件,但往往下载的软件都是那种"垃圾软件&quo ...

  2. 送给vue初学者的 vue.js技巧

    1.setTimeout/ setInterval 场景一 :this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInte ...

  3. 图书管理系统BMS

    图书管理系统BMS 效果图: 主要代码: 表关系的创建: from django.db import models # Create your models here. class Book(mode ...

  4. Java基础1-1-5—java基础语法(idea开发工具)

    5. 开发工具 5.1 idea中项目结构 project(项目.工程) module(模块) package(包) class(类) 一个项目中可以存在多个模块多个模块中,存放项目不同的业务功能代码 ...

  5. Linux三剑客日志处理系列

    三剑客日志处理系列 一.特殊符号 1.引号系列 必会 引号 含义 单引号 所见即所得,单引号里的内容会原封不动输出 双引号 和单引号类似,对双引号里面的特殊符号进行解析,对于{}花括号(通配符)没有解 ...

  6. MySQL软件安装教程(windows系统)

    目录 一.访问官网下载安装包 1.访问官网 2.点击DOWNLOADS 3.下拉页面,点击MySQL Community (GPL) Downloads » 4.接着点击MySQL Community ...

  7. python自动发布

    import os import paramiko baseconfig = { "ip": "121.4.38.187", "port": ...

  8. 最长上升子序列 II 时间复杂度(nlogn)

    题目:最长上升子序列 II 给定一个长度为 N 的数列,求数值严格单调递增的子序列的长度最长是多少. 输入格式 第一行包含整数 N. 第二行包含 N个整数,表示完整序列. 输出格式 输出一个整数,表示 ...

  9. 嵌入式Linux—Framebuffer应用编程

    Framebuffer 应用编程 Frame的意思是帧,buffer的意思是缓冲区.Framebuffer就是一块内存(硬件设备),里面保存着一帧图像. ioctl()函数解析 ioctl()函数非常 ...

  10. JDBC工具类,减少代码冗余好帮手

    首先要在scr下创建一个file文件 当然 需要初始的注册驱动和数据库操作都可以实现,才可以用jdbc工具类进行减多少代码冗余~可以看前面一篇的博客,就是写如何连接jdbc哈~代码运行成功的快乐真的好 ...