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: {}
};

  1. 需要下载一个Blob.js (放在src 目录下)
  2. 新建一个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.utils.encode_range(range);return ws;
}function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {};
}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;
}function export_json_to_excel({title,multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = "xlsx"
} = {}) {// const merges = [`A1:${getCharCol(list.length - 2)}1`]; //合并单元格/* original data */filename = filename || "excel-list";data = [...data];data.unshift(header);if (title) {data.unshift(title);}for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i]);}var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {if (!ws["!merges"]) ws["!merges"] = [];merges.forEach(item => {ws["!merges"].push(XLSX.utils.decode_range(item));});}if (autoWidth) {/*设置worksheet每列的最大宽度*/const colWidth = data.map(row =>row.map(val => {/*先判断是否为null/undefined*/if (val == null) {return {wch: 13};} else if (val.toString().charCodeAt(0) > 255) {/*再判断是否为中文*/return {wch: val.toString().length * 2};} else {return {wch: val.toString().length};}}));// console.log(colWidth);/*以第一行为初始值*/let result = colWidth[0];colWidth[0][0]["wch"] = 13;// console.log(colWidth[0][0]["wch"]);for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j]["wch"] < colWidth[i][j]["wch"]) {result[j]["wch"] = colWidth[i][j]["wch"];}}}ws["!cols"] = result;}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var dataInfo = wb.Sheets[wb.SheetNames[0]];// const borderAll = {//   //单元格外侧框线//   top: {//     style: "thin"//   },//   bottom: {//     style: "thin"//   },//   left: {//     style: "thin"//   },//   right: {//     style: "thin"//   }// };//给所以单元格加上边框// for (var i in dataInfo) {//   if (i == '!ref' || i == '!merges' || i == '!cols' || i == 'A1') {//   } else {//     dataInfo[i + ''].s = {//       border: borderAll//     }//   }// }// 标题行let arr = ["A1","B1","C1","D1","E1","F1","G1","H1","I1","J1","K1","L1","M1","N1","O1","P1","Q1","R1","S1","T1","U1","V1","W1","X1","Y1","Z1"];// arr.some(function(v) {//   let a = merges[0].split(":");//   if (v == a[1]) {//     dataInfo[v].s = {};//     return true;//   } else {//     dataInfo[v].s = {};//   }// });//设置主标题样式let style = {font: {// name: "宋体",// sz: 18,color: { rgb: "000000" },bold: true// italic: false,// underline: false},alignment: {horizontal: "center",vertical: "center"}// fill: {//   fgColor: {rgb: "008000"},// },};// dataInfo["B1"].s = style;// dataInfo["A1"].s = style;//excel标题样式for (var i = 0; i < header.length; i++) {dataInfo[arr[i]].s = style;}var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: "binary"});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),`${filename}.${bookType}`);
}
function toExportExcel(tHeader, data, filename) {import("@/excel/Export2Excel").then(excel => {//表头对应字段excel.export_json_to_excel({header: tHeader,data: data,filename: filename,autoWidth: true,bookType: "xlsx"});});
}
export { toExportExcel, export_json_to_excel };

//util.js
import "@/excel/Blob";export { json2excel, getCharCol, formatJson };// 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()
//   };
//   // eslint-disable-next-line
//   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {//     let value = formatObj[key];
//     // Note: getDay() returns 0 on Sunday
//     if (key === "a") {//       return ["日", "一", "二", "三", "四", "五", "六"][value];
//     }
//     if (result.length > 0 && value < 10) {//       value = "0" + value;
//     }
//     return value || 0;
//   });
//   // eslint-disable-next-line
//   return time_str;
// }function json2excel(tableJson, filenames, autowidth, bookTypes) {import("@/excel/Export2Excel").then(excel => {var tHeader = [];var dataArr = [];var sheetnames = [];for (var i in tableJson) {tHeader.push(tableJson[i].tHeader);dataArr.push(formatJson(tableJson[i].filterVal, tableJson[i].tableDatas));sheetnames.push(tableJson[i].sheetName);}excel.export_json_to_excel({header: tHeader,data: dataArr,sheetname: sheetnames,filename: filenames,autoWidth: autowidth,bookType: bookTypes});});
}
// 数据过滤,时间过滤
function formatJson(filterVal, jsonData) {return jsonData.map(v =>filterVal.map(j => {if (j === "timestamp") {return parseTime(v[j]);} else {return v[j];}}));
}// 获取26个英文字母用来表示excel的列
function getCharCol(n) {for (var i = 0; i < this.list.length; i++) {this.list[i].showActive = false;if (index == i) {this.list[index].showActive = true;}}let temCol = "",s = "",m = 0;while (n > 0) {m = (n % 26) + 1;s = String.fromCharCode(m + 64) + s;n = (n - m) / 26;}return s;
}

用法

<div @click="exportExcel">下载短信模板</div>

import { formatJson } from "@/util.js";
import { toExportExcel } from "@/excel/Export2Excel";
export default {data() {return {//表格的数据list: [{name: "蓝叶子",phone: 18955191234,content:"第一个为前置条件,最后一个为预期结果,需要带相应关键字,第一个为前置条件,最后一个为预期结果"},{name: "蓝叶子",phone: 18955191234,content: "第一个为前置条件,最后一个为预期结果,需要带相应关键字"},{name: "蓝叶子",phone: "18955191234",content:"第一个为前置条件,最后一个为预期结果,需要带相应关键字,zhenhgdsdfsff"},{name: "蓝叶子",phone: 18955191234,content: "第一个为前置条件,最后一个为预期结果,需要带相应关键字"},{name: "蓝叶子",phone: "18955191234",content:"第一个为前置条件,最后一个为预期结果,需要带相应关键字,zhenhgdsdfsff"},{name: "蓝叶子",phone: 18955191234,content: "第一个为前置条件,最后一个为预期结果,需要带相应关键字"},{name: "蓝叶子",phone: "18955191234",content:"第一个为前置条件,最后一个为预期结果,需要带相应关键字,zhenhgdsdfsff"}]};},methods: {exportExcel() {const filterVal = [];const list = this.list.map((item, index) => {if (index === 0) {for (var k in item) {filterVal.push(k);}}return {name: item.name,phone: +item.phone, //转成numbercontent: item.content};});const tHeader = ["姓名", "手机号", "内容"]; //表头const data = formatJson(filterVal, list);const filename = "短信模板";toExportExcel(tHeader, data, filename);}}
};

vue导出excel并修改样式相关推荐

  1. 封装vue导出excel组件(扩展嵌入图片、操作工作表、表格样式等功能)

    导出的excel中嵌入图片,同时还需要操作多个工作表与表格样式, 看了一些java的插件不太适合,因为我这边的需求是动态表单,字段不固定.后端的插件大部分依赖实体类注解,要不就是操作比较繁琐.又看了一 ...

  2. vue导出excel加一个进度条_vue导出excel遇到的问题解决方法

    本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...

  3. (vue)vue导出excel文件打不开,或者文件内容为object object

    (vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...

  4. vue导出excel功能实现

    vue导出excel功能实现 第一步安装依赖包 第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件 第三步在你那个组件中使用 写事件方法 Expor ...

  5. Oracle EBS 导出EXCEL文件CSS样式应用

    Oracle EBS 导出EXCEL文件CSS样式应用 在css中加入:mso-number-format定义数据格式,格式可以在excel中查看自定义格式,具体可以参考一下: mso-number- ...

  6. vue导出excel表的时候有多张图片

    vue导出excel的时候多张图片 遇到数据结构是[ { id:id, image:['图片','图片','图片'] } ] 这样的数据导出,使用插件 js-table2excel 导出的时候发现它只 ...

  7. vue导出Excel表格全局函数(简洁明了)

    vue导出excel全局函数(简洁明了) 将导出到Excel功能封装成一个公用js函数,供其他vue页面复用. 1.安装Excel插件 npm install --save xlsx file-sav ...

  8. js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改(添加标题,边框等),并且上传npm踩坑记录...

    前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...

  9. 纯前端js(或者vue)导出excel实现:合并单元格、设置单元格样式、单元格内换行

    前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...

  10. vue导出excel表格,使用xlsx-style自定义字体样式,字体颜色,合并单元格,单元格填充色

    一.需要依赖 npm install xlsx-style --save "^0.8.13" npm install xlsx --save "^0.18.5" ...

最新文章

  1. Memcache与Memcached的区别
  2. 一人之力,毁掉一个开发者活动
  3. 201671010434王雯涵 实验四附加实验:项目互评
  4. 计算机音乐深海少女,深海少女 MIDI File Download :: MidiShow
  5. 零售的本质是什么呢?
  6. Python中隐藏了你不知道的10个彩蛋
  7. 【实验技术笔记】RNA 抽提 + 反转录PCR + PCR引物设计 + RT-qPCR
  8. web-jsp(15) 购物车
  9. microsoftonenote_OneNote2017官方下载
  10. ECshop二次开发从开始
  11. 小谈工作面试 | 掘金技术征文
  12. c语言例题18:完全平方数
  13. activity透明主题引起生命周期的变化
  14. 2022计算机二级全套资料:视频+练习软件+真题资料
  15. 帝国cms php循环,帝国cms 灵动标签 循环嵌套
  16. 最速降线求解的数学模型
  17. 什么是高铁运营监测(转载)
  18. 移动最小二乘实现点云插值(上采样 | 增采样)详细讲解❤️❤️❤️
  19. 、OA系统中的绩效管理
  20. 中国联通正式公布3G资费标准

热门文章

  1. 斗地主发牌编程PHP,php模拟实现斗地主发牌
  2. webstorm破解版
  3. 用python延续科比的曼巴精神
  4. 原生js追加html代码,原生js动态添加元素
  5. mysql性能优化金字塔法则 下载_千金良方:MySQL性能优化金字塔法则 pdf版
  6. s7-1200PLC和第三方扫码枪走以太网通信
  7. 判断是否是微信浏览器还是企业微信浏览器
  8. springboot的web练手项目,适合新手,以及初级程序员项目实战,也适合老手进行二次开发的众多项目
  9. Ableton Live 10 mac 破解版永久激活方法
  10. 手把手教会你mp3音频转文字怎么操作,快来码住