JS表格导出,让每一个单元格都自适应内容的宽度。
首选讲下为什么要写让表格中的每个单元格都自适应宽度的,因为门店的同事不懂excel表格自适应宽度的功能,其实我也不懂excel,emmmm..........,所以老板就让我来处理了,宝宝心里苦但是说不出。首先我这边是用vue去写的项目写方法之前我们需要下载三个依赖包npm install -S file-saver xlsxnpm install -D script-loader...
·
首选讲下为什么要写让表格中的每个单元格都自适应宽度的,因为门店的同事不懂excel表格自适应宽度的功能,其实我也不懂excel,emmmm..........,所以老板就让我来处理了,宝宝心里苦但是说不出。
首先我这边是用vue去写的项目
写方法之前我们需要下载三个依赖包
npm install -S file-saver xlsx
npm install -D script-loader
如果你有很多地方都需要用到导出表格这个功能的话,建议在main.js入口文件中引入
// 这是main.js文件
import XLSX from "xlsx";
import FileSaver from "file-saver";
我们还需要使用到BIod跟Export2Excel文件,这两个文件我放到了我GitHub上面,如果有需要的可以直接上我GitHub下载,可也自行去 快乐的天堂 下载,文件地址:一股神秘的力量 。
下载好后可按我这么创建文件夹存放
那我们进入正题吧,以下未成年儿童不易观看~~~~
那我们开始贴代码莫咯
// 我喜欢这么写,不服的酒吧setTableDat扣出来就行了
// 假设这是跟main.js同级utlis文件夹下面的tableexport.js吧
exports.install = function (Vue, options) {
/* eslint-disable */
// 导出表格功能
Vue.prototype.$tableExport = {
/**
* 导出excel表格
* @param {导出的数据,数组} dataArr 必传 比如 [{name:小王,age:10,deran:'男'}]
* @param {表头} headerdata 必传 比如 ['名字','年龄','性别']
* @param {表格的key值} keydata 必传 比如 ['name','age','deran']
* @param {表格导出的名字} tablename 不传默认这表格数据
*/
setTableData : (dataArr = [], headerdata = [], keydata = [], tablename = '表格数据') => {
require.ensure([], () => {
const {
export_json_to_excel
} = require('vendor/Export2Excel.js');
// vendor/Export2Excel.js 这个是在webpakc中配置了vendor
/*alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'vendor': resolve('src/vendor')
}*/
const tHeader = headerdata;
const filterVal = keydata;
const list = dataArr;
const data = setDatas(filterVal,list)
// 参数过滤
function setDatas(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
export_json_to_excel({header:tHeader, data, filename:tablename});
})
}
}
}
//========================//
// 我们又假设这是main.js吧
// 在这里需要引入自己之前在utlis文件夹下面的tableexport.js
import tableexport from './utils/tableexport'
Vue.use(tableexport) // 注入
// 到这一步就是在需要导出表格的地方使用了
// 导出表格
daochu() {
if(this.tableData.length==0){
this.$message.error("目前表格没有数据不能导出");
}else{
// 这是需要导出的表头
let headerArr = ['产品编号','产品名称','产品路线','产品状态']
// 这是数组中obj中的属性
let keyArr = ['productNo','title','route','statename']
this.$tableExport.setTableData(this.tableData,headerArr,keyArr,this.tableData[0].route+'表格')
}
},
// 然后没了,就这样子的了
更多推荐
已为社区贡献2条内容
所有评论(0)