vue前端使用xlsx和 xlsx |
您所在的位置：网站首页 › 样式不包括对齐excel › vue前端使用xlsx和 xlsx |
vue前端使用xlsx和 xlsx
|
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、下载xlsx xlsx-style二、使用步骤1.引入库xlxs2.引入库xlsx-style 三、页面中下载表格1. html代码2. js代码3.页面的效果4下载下来的效果 前言vue前端使用xlsx和 xlsx-style 下载表格 使用 xlsx-style可以合并单元格，修改样式 一、下载xlsx xlsx-style npm i xlsx npm i xlsx-style 二、使用步骤 1.引入库xlxs这里注意，单纯引用xlsx会有问题，然后我这边是吧xlsx.js下载下来，然后再index.html中引用 我在页面是这个使用的，代码如下（示例）：
使用xlsx-style 的时候要注意，使用的是会报错误，所以，我们需要改他的源码，下面是正确的修改方式，代码如下（示例）： # 第一步 修改nod_modules 里面xlsx-style文件夹下面dist文件夹下的cpexcel.js文件 807: var cpt = cptable; # 第二步 修改xlsx-style文件夹下面ods.js文件 10: return require('./' + 'xlsx').utils; 12: try { return require('./' + 'xlsx').utils; } # 第三步 修改xlsx-style文件夹下面的xlsx.js文件 替换write_ws_xml_data以下方法 var DEF_PPI = 96, PPI = DEF_PPI; function px2pt(px) { return px * 96 / PPI; } function pt2px(pt) { return pt * PPI / 96; } function write_ws_xml_data(ws, opts, idx, wb) { var o = [], r = [], range = safe_decode_range(ws['!ref']), cell, ref, rr = "", cols = [], R, C,rows = ws['!rows']; for(C = range.s.c; C 0) { // 表头设置 const aoa = [["固收指标表"], [""]]; // const time = this.$moment(this.searchParam.vDate).format("YYYYMMDD"); console.log(this.tableData); aoa.push(["中文指标名称", "英文指标名称", "指标值"]); this.tableData.map((item) => { aoa.push([item.date, item.name, item.address]); }); const sheet = this.xlsxAddStyle(aoa); this.openDownloadDialog(this.sheet2blob(sheet), `1.xlsx`); } else { this.$message.warning({ message: "没有数据无法导出", duration: 1000, }); } }, /** * 通用的打开下载对话框方法，没有测试过具体兼容性 * @param url 下载地址，也可以是一个blob对象，必选 * @param saveName 保存文件名，可选 */ openDownloadDialog(url, saveName) { var urlA; if (typeof url === "object" && url instanceof Blob) { urlA = URL.createObjectURL(url); // 创建blob地址 } const aLink = document.createElement("a"); aLink.href = urlA; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效 aLink.download = saveName || ""; let 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); }, // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载 sheet2blob(sheet, sheetName) { var sheetNameS = sheetName || "sheet1"; var workbook = { SheetNames: [sheetNameS], Sheets: {}, }; workbook.Sheets[sheetNameS] = sheet; // 生成excel的配置项 var wopts = { bookType: "xlsx", // 要生成的文件类型 bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性 type: "binary", }; var wbout = XLSXStyle.write(workbook, wopts); // XLSXStyle.write(wb, { bookType: bookType, bookSST: false, type: 'binary' }); 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; }, // 表格样式的设置 xlsxAddStyle(xlsx) { const sheet = XLSX.utils.aoa_to_sheet(xlsx); // console.log(sheet); const mergeArr = []; // 合并的单元格 const rowH = []; // 表格每列高度 // 单元格外侧有框线 const borderAll = { top: { style: "thin" }, bottom: { style: "thin" }, left: { style: "thin" }, right: { style: "thin" }, }; // 单元格外侧无框线 const noBorder = { top: { style: "" }, bottom: { style: "" }, left: { style: "" }, right: { style: "" }, }; for (const key in sheet) { if (Object.hasOwnProperty.call(sheet, key)) { const element = sheet[key]; if (typeof element === "object") { const index = Number(key.slice(1)) - 1; rowH[index] = { hpx: 24 }; element.s = { alignment: { horizontal: "left", // 所有单元格右对齐 vertical: "center", // 所有单元格垂直居中 }, font: { name: "宋体", sz: 10, italic: false, underline: false, }, border: borderAll, fill: { fgColor: { rgb: "FFFFFFFF" }, }, }; // 指标值表格的样式 if (key.indexOf("C") > -1) { element.s.alignment.horizontal = "right"; } // 标题的样式 if (index === 2) { element.s.font.bold = true; element.s.fill.fgColor = { rgb: "FFCCFFFF" }; } // 处理合并单元格数组 s 开始 e 结束 c 列 r行 if (element.v === "固收指标表") { mergeArr.push({ s: { c: 0, r: 0 }, e: { c: 2, r: 1 }, }); } } } } // 表头的样式设置 sheet["A1"].s.alignment.horizontal = "center"; sheet["A1"].s.font.underline = true; sheet["A1"].s.font.sz = 18; sheet["A1"].s.border = noBorder; // 单元格的列宽 sheet["!cols"] = [{ wpx: 350 }, { wpx: 450 }, { wpx: 160 }]; sheet["!rows"] = rowH; sheet["!merges"] = mergeArr; return sheet; }, }, 3.页面的效果
|
【本文地址】
今日新闻 |
推荐新闻 |