基于Vue2前端将网页数据转为Excel导出
首先，安装xlsx插件git
npm install xlsx
插件文档地址xlsx官方文档github
在组件这中引入npm
import XLSX from 'xlsx';
所要导出的数据以下json
// 设置面板标题
settingPanelTitle:"",
col:1,
// 是否编辑
isEdit:true,
// 表头数据
headerData: {
"offerData":{
name:"项目名称",
spec:"规格",
unit:"单位",
count:"数量",
unitPrice:"单价",
total:"金额",
cardNum:"卡数",
comments:"备注"
},
"offerData1":{
name:"项目名称1",
spec:"规格1",
unit:"单位1",
count:"数量1",
unitPrice:"单价1",
total:"金额1",
cardNum:"卡数1",
comments:"备注1"
}
},
// 表格数据
allData:{
"offerData":[
{
name:"柜体1",
spec:"sasd",
unit:"sadad",
count:"5",
unitPrice:"145",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"柜体2",
spec:"sasd",
unit:"sadad",
count:"10",
unitPrice:"522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"柜体3",
spec:"sasd",
unit:"sadad",
count:"15",
unitPrice:"142",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"柜体4",
spec:"sasd",
unit:"sadad",
count:"20",
unitPrice:"22",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"柜体5",
spec:"sasd",
unit:"sadad",
count:"25",
unitPrice:"222",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"柜体6",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"322",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
}
],
"offerData1":[
{
name:"边框1",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"边框2",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"边框3",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"边框4",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"边框5",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
},
{
name:"边框6",
spec:"sasd",
unit:"sadad",
count:"12",
unitPrice:"14522",
total:"",
cardNum:5,
comments:"大师大师多撒好低"
}
]
},
//页头部分
pageHead:{
"offerData":[
{
name:"订单号：",
isEdit:false
},
{
name:"客户名称：",
isEdit:false
},
{
name:"销售日期：",
isEdit:false
},
{
name:"联系人：",
isEdit:false
},
{
name:"联系地址：",
isEdit:false
}
],
"offerData1":[
{
name:"订单号1：",
isEdit:false
},
{
name:"客户名称1：",
isEdit:false
},
{
name:"销售日期1：",
isEdit:false
},
{
name:"联系人1：",
isEdit:false
},
{
name:"联系地址1：",
isEdit:false
}
]
},
// 页头部份内容
pageHeadContent:{
"offerData":[
{
name:"1231312313"
},
{
name:"zoe"
},
{
name:"2017-10-21"
},
{
name:"joe"
},
{
name:"beijibng"
}
],
"offerData1":[
{
name:"2231312313"
},
{
name:"zoe1"
},
{
name:"2017-10-21"
},
{
name:"joe11"
},
{
name:"beijibng111"
}
]
},
options: {
'offerData':{
value: 'offerData',
label: '报价明细单'
},
'offerData1':{
value: 'offerData1',
label: '报价明细单1'
}
},
value: 'offerData', //选择的表格
outputData:[], // 导出的数据
outFile: '', // 导出文件el
在ui层放个导出按钮和a标记模仿导出弹框ui
<button @click=" downloadFile(outputData)" id="export-table" class="btn btn-default">导出</button> <a id="downlink"></a>
点击导出按钮触发this
// 导出功能
downloadFile: function (rs) { // 点击导出按钮
//拼接导出的数据
//1.拼接标题
rs.push({title:this.settingPanelTitle});
//2.拼接表头内容
let headContent={};
//页头项
let pHead=this.pageHead[this.value];
//页头项对应的内容
let pHeadContent=this.pageHeadContent[this.value];
for(let i in pHead){
headContent[i]=pHead[i].name+""+pHeadContent[i].name;
}
// console.log(headContent);
rs.push(headContent);
//3.拼接表头标题
rs.push(this.headerData[this.value]);
//4.拼接表内容
rs.push(...this.allData[this.value]);
//5.拼接表尾
rs.push({title:"合计",value:this.settingData[this.value].totalPrice});
// console.log(rs);
this.downloadExl(rs, this.settingPanelTitle)
},
downloadExl: function (json, downName, type) { // 导出到excel
let tmpdata = [] // 用来保存转换好的json
let maxLen=0; //最长的一行
json.map((v, i) => {
if(maxLen<Object.keys(v).length){
maxLen=Object.keys(v).length;
}
return Object.keys(v).map((k, j) => { //取出键对应的值
return Object.assign({}, { //拼接输出的sheet
v: v[k],
position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
})}
)
}).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
tmpdata[v.position] = { //转换输出json
v: v.v
}
})
let outputPos = Object.keys(tmpdata) // 设置区域,好比表格从A1到D10
// console.log(outputPos);
// 转化最长的行所对应的区域码
maxLen=this.getCharCol(maxLen);
// console.log(maxLen+outputPos[outputPos.length-1].slice(1));
let tmpWB = {
SheetNames: ['mySheet'], // 保存的表标题
Sheets: {
'mySheet': Object.assign({},
tmpdata, // 内容
{
'!ref': outputPos[0] + ':' + (maxLen+outputPos[outputPos.length-1].slice(1)) // 设置填充区域
})
}
}
let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
{bookType: (type === undefined ? 'xlsx' : type), bookSST: false, type: 'binary'} // 这里的数据是用来定义导出的格式类型
))], {
type: ''
}) // 建立二进制对象写入转换好的字节流
var href = URL.createObjectURL(tmpDown) // 建立对象超连接
this.outFile.download = downName + '.xlsx' // 下载名称
this.outFile.href = href // 绑定a标签
this.outFile.click() // 模拟点击实现下载
setTimeout(function () { // 延时释放
URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
}, 100)
},
// 转2进制
s2ab(s){
if(typeof ArrayBuffer !== 'undefined'){
let buf =new ArrayBuffer(s.length);
let view =new Uint8Array(buf);
for(var i=0;i!=s.length;++i) view[i] =s.charCodeAt(i) & 0xFF;
return buf;
}else{
let buf= new Array(s.length);
for(var i=0;i!=s.length;++i) buf[i] =s.charCodeAt(i) & 0xFF;
return buf;
}
},
// 将指定的天然数转换为26进制表示。映射关系：[0-25] -> [A-Z]。
getCharCol(n) {
let s = ''
let m = 0
while (n > 0) {
m = n % 26 + 1
s = String.fromCharCode(m + 64) + s
n = (n - m) / 26
}
return s
},
实现效果
spa
相关文章
- 1. 前端导出Excel不跳转页面
- 2. JS前端将table数据导出为EXCEL
- 3. Vue2 导出excel
- 4. 【前端】将前台table数据导出excel表格
- 5. 纯前端导出数据xlsx、excel表格，前端导出json数据，html+js导出数据,导出xlsx、excel数据，纯javaScript导出xlsx、excel表格
- 6. 将数据导出Excel表
- 7. 将数据导出到Excel
- 8. 将数据导【入】【excel表】格式 前端页面
- 9. （前端导出Excel）JS、HTML导出Excel
- 10. 网页导出excel
- 更多相关文章...
- • Web 网页 验证 - 网站建设指南
- • 网站 数据库 - 网站主机教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
