一个基于xlsx的导出表格插件
method of use一个导出表格的插件
pl-export-excel方法npm i pl-export-excel
| 方法名 | 说明 | 参数 | 参数表述 |
|---|---|---|---|
| formatJson | 格式化数据 | filterVal, jsonData | filterVal 表头在数据中的对应key数组; jsonData 需要导出表格数据 |
| exportExcelMethod | 通过table ID渲染导出表格（不能是组件，必须是手写的table表格） | tableId, fileName, sheetName | tableId 需要导出表格的ID; fileName 文件名; sheetName 表名 |
| exportJsonToExcel | 通过json渲染导出表格（常用） | 见下面的表 | 见下面的表 |
| exportTableToExcel | 通过table标签渲染导出表格（常用，可以是el-table,也可是pl-table） | 见下面的表 | 见下面的表 |
| 参数名 | 参数描述 | 必填 | 类型 | 默认值 |
|---|---|---|---|---|
| id | 需要导出表格的ID | 是 | String | — |
| filename | 表格名 | 否 | String | '空' |
| bookType | 文件类型 | 否 | String | 'xlsx' |
| styleFun | 样式函数方法 | 否 | Function | styleFun(参数是当前表格ws) |
| 参数名 | 参数描述 | 必填 | 类型 | 默认值 |
|---|---|---|---|---|
| title | 标题 | 否 | Array | [] |
| multiHeader | 多级头 | 否 | Array | [] |
| header | 头部 | 否 | Array | [] |
| data | 表格数据 | 否 | Array | [] |
| filename | 表格名 | 否 | String | '' |
| merges | 合并单元格数组 | 否 | Array | [] |
| autoWidth | 宽度是否自适应 | 否 | Boolean | true |
| bookType | 文件类型 | 否 | String | 'xlsx' |
| styleFun | 样式函数方法 | 否 | Function | styleFun(参数是当前表格ws) |
实例
// 第一步 在入口文件的index.html，引入XLSX样式 <script src="https://unpkg.com/pl-export-excel@1.1.3/package/xlsx.core.min.js"></script> // 第二步,在项目中的使用 import { exportJsonToExcel, formatJson } from 'pl-export-excel' // 导出按钮方法 handleEmits () { // 表头 const tHeader = ['经销商名称', '下单时间', '订单编号', '客户名称', '订单状态', '付款状态'] // 表头在数据中的对应key const filterVal = ['names', 'date', 'orderNumber', 'customerName', 'orderState', 'orderPayState'] // 表格数据 const list = Array.from({ length: 1000 }, (_, idx) => ({ names: '娃哈哈', date: '201920120', orderNumber: '1521', customerName: '彭垒', orderState: '在线', orderPayState: '全付款' })) // 导出的数据 const data = formatJson(filterVal, list) // 导出表格 exportJsonToExcel({ header: tHeader, data: data, merges: [{ s: {//s为开始 c: 0,//开始列 r: 0//可以看成开始行,实际是取值范围 }, e: {//e结束 c: 5,//结束列 r: 1//结束行 } }], multiHeader: [ ["工作情况一览表", "", "", "", "", ""], ["", "", "", "", "", ""] // 为啥这里需要这样搞个空字符呢，存属上面合并列导致不得不这样写个哦 ], filename: 'erp订单', bookType: 'xlsx', // 不懂怎么设置ws,看https://github.com/protobi/js-xlsx/tree/beta#cell-object styleFun: function (ws) { ws["A1"].s = { font: { name: '宋体', sz: 18, color: {rgb: "ff0000"}, bold: true, italic: false, underline: false }, alignment: { horizontal: "center", vertical: "center" }, fill: { fgColor: {rgb: "008000"}, }, }; } }) } > 注意如果你不需要 pl-export-excel参与打包(减少打包体积) // 第一步: 请在webpack配置 externals: { 'pl-export-excel': 'PlExportExcel' } // 第二步: 在入口文件的index.html // 引入pl-export-excel <script src="https://unpkg.com/pl-export-excel@1.1.3/lib/index.js"></script> // 引入XLSX样式 <script src="https://unpkg.com/pl-export-excel@1.1.3/package/xlsx.core.min.js"></script> cdn方式用法
实例
// 在html页面引入： <body> <div>我是内容</div> 在这里引入脚本 // 引入pl-export-excel <script src="https://unpkg.com/pl-export-excel@1.1.3/lib/index.js"></script> // 引入XLSX样式 <script src="https://unpkg.com/pl-export-excel@1.1.3/package/xlsx.core.min.js"></script> </body> // 写法 <body> <div id="myApp"> 我是按钮 </div> <script> var btn = document.getElementById('myApp') btn.onclick = handleEmits // 导出按钮 function handleEmits () { // 表头 const tHeader = ['经销商名称', '下单时间', '订单编号', '客户名称'] // 表头在数据中的对应key const filterVal = ['names', 'date', 'orderNumber', 'customerName'] // 表格数据 const list = Array.from({length: 10000}, () => ({ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' })) // 导出的数据 const data = PlExportExcel.formatJson(filterVal, list) // 导出表格 PlExportExcel.exportJsonToExcel({ header: tHeader, data: data, filename: '经销商表格', autoWidth: true, bookType: 'xlsx' }) } </script> </body>
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
