vue导出excel并修改样式

最新推荐文章于 2024-08-06 16:10:14 发布

蓝色的落叶

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量1.2w

点赞数 7

分类专栏： vue项目文章标签： vue excel

本文链接：https://blog.csdn.net/qq_38502227/article/details/101702819

版权

这篇博客介绍了如何在Vue项目中实现Excel文件的导出，并详细讲述了处理xlsx-style库依赖错误的方法，包括修改源码和配置vue.config.js。同时，提供了相关文件的目录结构和使用示例，展示了导出Excel的效果。

摘要由CSDN通过智能技术生成

1.首先安装以下三个安装包

npm install --save xlsx(修改样式需要下载npm install --save xlsx-style)
npm install -S file-saver
npm install -D script-loader

注意：如果安装了npm install --save xlsx-style
会报错：This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

可以直接修改源码：
在\node_modules\xlsx-style\dist\cpexcel.js 807行的 var cpt = require(’./cpt’ + ‘able’); 改成 var cpt = cptable;

也可以在项目vue.config.js 文件中添加

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/styles/variables.scss";`
      }
    }
  },  
  chainWebpack: config => {
  //在 chainWebpack 添加下面的一段代码
    config.externals({ "./cptable": "var cptable" });**
  },
  devServer: {}
};

需要下载一个Blob.js　(放在src 目录下)
新建一个Export2Excel.js

//这是从网上的，改了一点点 Export2Excel.js
/* eslint-disable */
/* eslint-disable */
require("script-loader!file-saver");
import XLSX from "xlsx-style";

function datenum(v, date1904) {
   
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
   
  var ws = {
   };
  var range = {
   
    s: {
   
      c: 10000000,
      r: 10000000
    },
    e: {
   
      c: 0,
      r: 0
    }
  };
  for (var R = 0; R != data.length; ++R) {
   
    for (var C = 0; C != data[R].length; ++C) {
   
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
   
        v: data[R][C]
      };
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell({
   
        c: C,
        r: R
      });

      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
   
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";

      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws["!ref"] = XLSX