基于Vue2前端將網(wǎng)頁數(shù)據(jù)轉(zhuǎn)為Excel導(dǎo)出

willin 發(fā)布于2019-08-29 13:53 / 1001人閱讀

摘要：首先，安裝插件插件文檔地址官方文檔在組件這中引入所要導(dǎo)出的數(shù)據(jù)如下設(shè)置面板標(biāo)題是否編輯表頭數(shù)據(jù)項(xiàng)目名稱規(guī)格單位數(shù)量單價(jià)金額卡數(shù)備注項(xiàng)目名稱規(guī)格單位數(shù)量單價(jià)金額卡數(shù)備注表格數(shù)據(jù)柜體大師大師多撒好低柜體大師大師多撒好低柜體大師大師多撒好低柜體大

首先，安裝xlsx插件

    npm install xlsx

插件文檔地址xlsx官方文檔

在組件這中引入

import XLSX from "xlsx";

所要導(dǎo)出的數(shù)據(jù)如下

// 設(shè)置面板標(biāo)題
        settingPanelTitle:"",
        col:1,
        // 是否編輯
        isEdit:true,
        // 表頭數(shù)據(jù)
        headerData: {
          "offerData":{
            name:"項(xiàng)目名稱",
            spec:"規(guī)格",
            unit:"單位",
            count:"數(shù)量",
            unitPrice:"單價(jià)",
            total:"金額",
            cardNum:"卡數(shù)",
            comments:"備注"
          },
          "offerData1":{
            name:"項(xiàng)目名稱1",
            spec:"規(guī)格1",
            unit:"單位1",
            count:"數(shù)量1",
            unitPrice:"單價(jià)1",
            total:"金額1",
            cardNum:"卡數(shù)1",
            comments:"備注1"
          }
        },
        // 表格數(shù)據(jù)
        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:"訂單號(hào)：",
              isEdit:false
            },
            {
              name:"客戶名稱：",
              isEdit:false
            },
            {
              name:"銷售日期：",
              isEdit:false
            },
            {
              name:"聯(lián)系人：",
              isEdit:false
            },
            {
              name:"聯(lián)系地址：",
              isEdit:false
            }
          ],
          "offerData1":[
            {
              name:"訂單號(hào)1：",
              isEdit:false
            },
            {
              name:"客戶名稱1：",
              isEdit:false
            },
            {
              name:"銷售日期1：",
              isEdit:false
            },
            {
              name:"聯(lián)系人1：",
              isEdit:false
            },
            {
              name:"聯(lián)系地址1：",
              isEdit:false
            }
          ]
        },
        // 頁頭部分內(nèi)容
        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: "報(bào)價(jià)明細(xì)單"
          }, 
          "offerData1":{
            value: "offerData1",
            label: "報(bào)價(jià)明細(xì)單1"
          }
        },
        value: "offerData", //選擇的表格
        outputData:[], // 導(dǎo)出的數(shù)據(jù)
        outFile: "",  // 導(dǎo)出文件el

在ui層放個(gè)導(dǎo)出按鈕和a標(biāo)記模仿導(dǎo)出彈框

點(diǎn)擊導(dǎo)出按鈕觸發(fā)

// 導(dǎo)出功能
      downloadFile: function (rs) { // 點(diǎn)擊導(dǎo)出按鈕
        //拼接導(dǎo)出的數(shù)據(jù)
        //1.拼接標(biāo)題
        rs.push({title:this.settingPanelTitle});
        //2.拼接表頭內(nèi)容
        let headContent={};
        //頁頭項(xiàng)
        let pHead=this.pageHead[this.value];
        //頁頭項(xiàng)對(duì)應(yīng)的內(nèi)容
        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.拼接表頭標(biāo)題
        
        rs.push(this.headerData[this.value]);

        //4.拼接表內(nèi)容
        rs.push(...this.allData[this.value]);
        //5.拼接表尾
        rs.push({title:"合計(jì)",value:this.settingData[this.value].totalPrice});
        // console.log(rs);
        this.downloadExl(rs, this.settingPanelTitle)
      },
      downloadExl: function (json, downName, type) {  // 導(dǎo)出到excel
        let tmpdata = [] // 用來保存轉(zhuǎn)換好的json
        let maxLen=0; //最長的一行
        json.map((v, i) => {
          if(maxLen {  //取出鍵對(duì)應(yīng)的值

            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] = { //轉(zhuǎn)換輸出json
            v: v.v
          }
        })
        let outputPos = Object.keys(tmpdata)  // 設(shè)置區(qū)域,比如表格從A1到D10
        // console.log(outputPos);
        
        // 轉(zhuǎn)化最長的行所對(duì)應(yīng)的區(qū)域碼
        maxLen=this.getCharCol(maxLen);
        // console.log(maxLen+outputPos[outputPos.length-1].slice(1));
        let tmpWB = {
          SheetNames: ["mySheet"], // 保存的表標(biāo)題
          Sheets: {
            "mySheet": Object.assign({},
              tmpdata, // 內(nèi)容
              {
                "!ref": outputPos[0] + ":" + (maxLen+outputPos[outputPos.length-1].slice(1)) // 設(shè)置填充區(qū)域
              })
          }
        }
        let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB,
          {bookType: (type === undefined ? "xlsx" : type), bookSST: false, type: "binary"} // 這里的數(shù)據(jù)是用來定義導(dǎo)出的格式類型
        ))], {
          type: ""
        })  // 創(chuàng)建二進(jìn)制對(duì)象寫入轉(zhuǎn)換好的字節(jié)流
        var href = URL.createObjectURL(tmpDown)  // 創(chuàng)建對(duì)象超鏈接
        this.outFile.download = downName + ".xlsx"  // 下載名稱
        this.outFile.href = href  // 綁定a標(biāo)簽
        this.outFile.click()  // 模擬點(diǎn)擊實(shí)現(xiàn)下載
        setTimeout(function () {  // 延時(shí)釋放
          URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()來釋放這個(gè)object URL
        }, 100)
      },
      // 轉(zhuǎn)2進(jìn)制
      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;
        } 
      },
      // 將指定的自然數(shù)轉(zhuǎn)換為26進(jìn)制表示。映射關(guān)系：[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
      },

實(shí)現(xiàn)效果

云服務(wù)器 GPU云服務(wù)器 js怎樣將數(shù)據(jù)導(dǎo)出excel js將數(shù)據(jù)導(dǎo)出成excel js將二維數(shù)據(jù)轉(zhuǎn)為json js 數(shù)據(jù)導(dǎo)出excel

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112775.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

willin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云架構(gòu)&設(shè)計(jì)思想之SpringCloud+ Spring Boot + Mybati

閱讀 1983·2021-11-24 09:39
今天是Go語言12周年生日，裝一個(gè)開始Go語言之旅吧——

閱讀 978·2021-11-11 16:55
泡沫股價(jià)、外賣小哥要失業(yè)了？測(cè)試員還要不要進(jìn)美團(tuán)？一文帶你了解背后真相

閱讀 1426·2021-10-09 09:43
【艾云】美國洛杉磯新數(shù)據(jù)中心！抖音流媒體全解鎖！做抖音tiktok的福利來啦！

閱讀 1415·2021-10-08 10:17
搬瓦工新增兩款 CN2 高配機(jī)型 – DC3機(jī)房，CN2線路

閱讀 1648·2021-08-25 09:41
前端規(guī)范(ES6BEMOOCSSSMACSS)

閱讀 420·2019-08-30 13:02
前端每日實(shí)戰(zhàn)：6# 視頻演示如何用純 CSS 繪制一顆閃閃發(fā)光的璀璨鉆石

閱讀 627·2019-08-29 15:14
基于Vue2前端將網(wǎng)頁數(shù)據(jù)轉(zhuǎn)為Excel導(dǎo)出

閱讀 1002·2019-08-29 13:53

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于Vue2前端將網(wǎng)頁數(shù)據(jù)轉(zhuǎn)為Excel導(dǎo)出

相關(guān)文章