首页 > 编程语言 >vue 导出xlsx (报错./cptable in ./node modules/xlsx-style/dist/cpexcel.js)

vue 导出xlsx (报错./cptable in ./node modules/xlsx-style/dist/cpexcel.js)

时间:2024-05-31 13:44:30浏览次数:24  
标签:node xlsx style const 报错 time var return

  1. 安装 xlsx  和  xlsx-style
  2. src下创建文件夹utils , utils文件夹下创建index.js文件,index.js文件内容如下:
 * Created by Anqi on 16/11/18.
 */

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
// import XLSX from 'xlsx-style';
import XLSX from 'yxg-xlsx-style'

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null;
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
  let date;
  if (typeof time === 'object') {
    date = time;
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time);
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000;
    }
    date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  };
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ]; }
    return value.toString().padStart(2, '0');
  });
  return time_str;
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000;
  } else {
    time = +time;
  }
  const d = new Date(time);
  const now = Date.now();

  const diff = (now - d) / 1000;

  if (diff < 30) {
    return '刚刚';
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前';
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前';
  } else if (diff < 3600 * 24 * 2) {
    return '1天前';
  }
  if (option) {
    return parseTime(time, option);
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    );
  }
}

/**
 * @param {string} url
 * @returns {Object}
 */
export function param2Obj(url) {
  const search = url.split('?')[1];
  if (!search) {
    return {};
  }
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"')
        .replace(/\+/g, ' ') +
      '"}'
  );
}

export function downloadFile(fileName, res) {
  const blob = new Blob([res.data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  });
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(link.href);
}

export function resizeListener(chart) {
  window.addEventListener('resize', function() {
    chart.resize();
  });
}
// 为合并项添加边框
export const addRangeBorder = (range, ws) => {
  const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  range.forEach(item => {
    const startColNumber = Number(item.s.r); const endColNumber = Number(item.e.r); // 0-0
    const startRowNumber = Number(item.s.c); const endRowNumber = Number(item.e.c); // 0-16
    const test = ws[arr[startRowNumber] + (startColNumber + 1)]; // 合并项第一个单元格中的内容
    for (let col = startColNumber; col <= endColNumber; col++) { // 0-0
      for (let row = startRowNumber; row <= endRowNumber; row++) { // 0-16
        ws[arr[row] + (col + 1)] = test; // A1-P1
      }
    }
  });
  return ws;
};
// 将一个sheet转成最终的excel文件的blob对象
export const sheet2blob = (sheet, sheetName) => {
  // console.log(sheet, sheetName, 'sheet, sheetName')
  sheetName = sheetName || 'sheet1';
  console.log(sheetName, 'sheetName');
  var workbook = {
    SheetNames: [sheetName],
    Sheets: {}
  };
  workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

  var wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
    type: 'binary'
  };
  var wbout = XLSX.write(workbook, wopts);
  var blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream'
  }); // 字符串转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;
  }
  return blob;
};

export const openDownloadDialog = (url, saveName) => {
  if (typeof url === 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  var aLink = document.createElement('a');
  aLink.href = url;
  aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
  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);
};

  3.  注意!!!!!!!直接引用  import XLSX from 'xlsx-style'   会报错,报错信息如下图:

 

 

 

想要解决此错误需要修改model包里源码,需要修改源码:在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;,修改之后问题解决可以解决,但是另一个问题就来了,

因为修改了xlsx-style源码所以我们npm i的时候不能获取修改后的包,但是其实可以将修改后的源码上传自己的npm再下载自己修改后的包。但是由于本人实在懒得可怕,找了一位博主上传好的直接下载了!!!!!!!!!

下载   npm install --save yxg-xlsx-style ,   页面引入 :import XLSX from 'yxg-xlsx-style'

vue页面使用如下:

    exportFn() {

         var wb = XLSX2.utils.table_to_sheet(document.querySelector('#table'));// mytable为表格的id名
      console.log(wb);
      if (!wb['!fullref']) {
        this.$message.warning('无法导出:报表无数据');
        return;
      }
      // 设置列宽(这里用到列的数量是用来设置不同列的不同宽度的)
      const sum = 8; // 列的数量,根据自身项目进行数据的更改
      for (var i = 0; i < sum; i++) {
        wb['!cols'][i] = { wpx: 160 };
      }
      for (const key in wb) {
        if (key.indexOf('!') === -1) { // 排除带!的字段,只要单元格字段
          wb[key].s = {
            font: { // 字体设置
              sz: 13,
              bold: false,
              color: {
                rgb: '000000'// 十六进制,不带#
              }
            },
            border: { // 设置边框
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            alignment: { // 文字居中 //字体水平居中、垂直居中、自动换行
              horizontal: 'center',
              vertical: 'center',
              wrap_text: true
            }
          };
        }
      }
      // var data = addRangeBorder(wb['!merges'], wb); // 合并项添加边框
      let a = dayjs(this.queryParams.time[0]).format('YYYYMMDDHHmmss');
      let b = dayjs(this.queryParams.time[1]).format('YYYYMMDDHHmmss');
      var filedata = sheet2blob(wb); // 将一个sheet转成最终的excel文件的blob对象
      openDownloadDialog(filedata, `数据_${a}_${b}.xlsx`); // 下载报表
    },

别忘记在el-table 上定义 ID !!!!!!!!!!!!!!!

 

标签:node,xlsx,style,const,报错,time,var,return
From: https://www.cnblogs.com/anqiphp/p/18224375

相关文章

  • go tool compile 报错 could not import sync (file not found)
    前言Go版本:$goversiongoversiongo1.21.4darwin/amd64我想对go文件进行反汇编,然后就报错了:$gotoolcompile-Srace.gorace.go:3:8:couldnotimportsync(filenotfound)我就惊讶了一下,标准库怎么还能找不到呢?难道是我GOROOT配置错了?发现了问题原因原......
  • 透过 node-exporter 彻底弄懂机器监控:01. node-exporter 框架讲解
    前言Prometheus生态里有很多采集器负责各类监控数据的采集,其中使用最广泛的,显然是node-exporter,负责Linux、BSD等系统的常规监控指标的采集,比如CPU、内存、硬盘、网络、IO等。其github地址是:https://github.com/prometheus/node_exporter 。很多人都用过,但对其细节未必......
  • Linux 下 Node 安装与配置
    一、官网地址:Node.js中文网二、linux版本:lsb_release-a三、下载安装包3.1、下载地址:下载|Node.js中文网3.2、使用wget命令下载到linux服务器(也可以下载到本地再上传,在/usr/local目录)wgethttps://cdn.npmmirror.com/binaries/node/v16.17.0/node-v16.17.0-linux-x64.t......
  • 安装并运行pytorch报错“核心已转储”
    1问题和解决概要主机环境:Ubuntu20.04,RTX3090,GPUDriverVersion525.89.02问题:用anaconda创建虚拟环境python3.10,安装pytorch2.2.2-cu118和对应torchvision后,训练模型出现报错:“核心已转储”。定位和解决:查阅资料,确认driver支持cuda-11.8,主机安装cuda-11.8后编译一个sample......
  • Mac卸载 Node npm,升级 Node
    电脑上的版本太老了。删除重新下载安装https://nodejs.org/en/download/prebuilt-installer由于使用安装包的形式安装的,所以网上的卸载命令不起作用。直接通过命令删除:#删除Node、npmjimmy@MacBook-Pronpm%sudorm-rf/usr/local/{bin/{node,npm},lib/node_modules/npm......
  • promisify(rimraf)('node_modules') 这样的好处是什么?
    promisify(rimraf)('node_modules')这样的用法结合了两个Node.js中的概念:promisify和rimraf,带来了以下好处:从回调到Promise:promisify是Node.js内置的util模块中的一个函数,它将采用回调风格的函数转换为返回Promise的函数。这意味着原本使用回调的异步操作变得更加易于理解......
  • 新版Python安装,新手入门必看,报错分析
    第一次接触Python的朋友,可能会在安装的过程中遇到很多问题,下面会详细的指出可能出现的各种状况、以及应对方法,让新入行的朋友也可上手安装,并且完成第一个Helloworld代码。【Python安装】一、打开python官网点击下载搜索并打开官网进入页面后点击导航中的Downloads进入下载......
  • 使用 Vue 导入和导出 Excel XLSX--SpreadJS
    使用Vue导入和导出ExcelXLSX2024年5月29日MESCIUS的SpreadJS使您能够将功能齐全的电子表格放入您的Web应用程序中,为用户提供熟悉的类似Excel的体验。MESCIUS的SpreadJS是一款高性能JavaScript电子表格组件,旨在将类似Excel的......
  • SQL Server报错:数据库"YourDatabaseName"的事务日志已满,原因为"LOG_BACKUP"
      通过以下代码可以收缩日志,执行完后就不报错了。--设置简单模式USE[master]GOALTERDATABASEYourDatabaseNameSETRECOVERYSIMPLEWITHNO_WAITGOALTERDATABASEYourDatabaseNameSETRECOVERYSIMPLEGO--设置压缩后的日志大小为2M,可自定义USEY......
  • 从零开始创建一个nodejs+ts+express+热加载的简易项目
    为了搭建一个nodejs+express+ts+热加载的一个简易项目,需要配置一些基础的文件来确保ts代码能被编译和正确的运行。下面是一个详细的配置例子,以供参考。1.安装Node.js:确保系统上已经安装了Node.js。这一步省略,安装也很简单。2.初始化项目创建一个新的项目目录并......