最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
vueexcel上傳預(yù)覽和table內(nèi)容下載到excel文件中

excel上傳預(yù)覽

創(chuàng)新互聯(lián)公司于2013年開始,先為榮成等服務(wù)建站,榮成等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為榮成企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中

這里會(huì)用到

npm i element-ui
npm i xlsx

在vue的template中寫上,排版和css看個(gè)人需求

選擇文件

vue的js中寫上

export default {
 data() {
 return {
  listTable: []
   }
 },
 methods:{
 // 上傳預(yù)覽
   importf(obj) {
    let that= this;
    let inputDOM = this.$refs.inputer; // 通過DOM取文件數(shù)據(jù)
    this.file = event.currentTarget.files[0];
    var rABS = false; //是否將文件讀取為二進(jìn)制字符串
    var f = this.file;
    var reader = new FileReader();
    //if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(f) {
     var binary = "";
     var rABS = false; //是否將文件讀取為二進(jìn)制字符串
     var pt = this;
     var wb; //讀取完成的數(shù)據(jù)
     var outdata;
     var reader = new FileReader();
     reader.onload = function(e) {
      var bytes = new Uint8Array(reader.result);
      var length = bytes.byteLength;
      for (var i = 0; i < length; i++) {
       binary += String.fromCharCode(bytes[i]);
      }
      var XLSX = require("xlsx");
      if (rABS) {
       wb = XLSX.read(btoa(fixdata(binary)), {
        //手動(dòng)轉(zhuǎn)化
        type: "base64"
       });
      } else {
       wb = XLSX.read(binary, {
        type: "binary"
       });
      }
      // outdata就是你想要的東西 excel導(dǎo)入的數(shù)據(jù)
      outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      // excel 數(shù)據(jù)再處理
      let arr = [];
      // 這里需要注意名字一定要和excel的內(nèi)容的文字對(duì)上
      outdata.map(v => {
       let obj = {};
       obj.name = v.姓名;
       obj.department = v.部門;
       arr.push(obj);
      });
      // 放入到element的table中顯示出來
      that.listTable = arr;
     };
     reader.readAsArrayBuffer(f);
    };
    if (rABS) {
     reader.readAsArrayBuffer(f);
    } else {
     reader.readAsBinaryString(f);
    }
    // 這里補(bǔ)個(gè)時(shí)間問題,excel的時(shí)間格式是序列號(hào),如果用的上需要轉(zhuǎn)化
    // 需要在這個(gè)位置加上調(diào)用方法
    // outdata.map(v => {
    //  let obj = {};
    //  obj.time= ExcelDateToJSDate(v.時(shí)間);
    //  arr.push(obj);
    // });
    // 這個(gè)方法暫時(shí)是目前找的比較好,日期不是很精確,精確不到秒(暫未查出小時(shí)和分鐘出問題),excel日期序列號(hào)裝換成時(shí)間格式,
    // function ExcelDateToJSDate(serial) {
    //  let utc_days = Math.floor(serial - 25569);
    //  let utc_value = utc_days * 86400;
    //  let date_info = new Date(utc_value * 1000);
    //  let fractional_day = serial - Math.floor(serial) + 0.0000001;
    //  let total_seconds = Math.floor(86400 * fractional_day);
    //  let seconds = total_seconds % 60;
    //  total_seconds -= seconds;
    //  let hours = Math.floor(total_seconds / (60 * 60));
    //  let minutes = Math.floor(total_seconds / 60) % 60;
    //  let ctime=new Date(date_info.getFullYear(), date_info.getMonth(), date_info.getDate(), hours, minutes, seconds);
    // 這是時(shí)間拼接,需要什么格式可以自行拼接
    //  return (ctime.getFullYear()+'-'+(ctime.getMonth()+1)+'-'+ctime.getDate());
    // }
   },
   // 上傳按鈕
   fileBtn() {
   //上傳這里可以分兩種,一種是直接獲取input的文件上傳給后端,一種是我們已經(jīng)解析了excel所以只要把listTable數(shù)組傳給后端
   //兩種方法都可行,看自己需求
   }
 }
}

下面是excel上傳文件模板

vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中

table內(nèi)容下載到excel文件中

因?yàn)榉绞讲灰粯樱枰诎惭b

npm i file-saver

在vue的script中引入

import XLSX from "xlsx";
import FileSaver from "file-saver";

內(nèi)容導(dǎo)出,寫在vue的methods中

downBtn() {
 // 獲取table的dom元素
 let vv = XLSX.utils.table_to_book(document.getElementById("tableExcel"));
 let vbouts = XLSX.write(vv, {
  bookType: "xlsx",
  bookSST: true,
  type: "array"
 });
 try {
  FileSaver.saveAs(
   // 這是下載的excel文件名 
   new Blob([vbouts], { type: "application/octet-stream" }),
   "員工表.xlsx"
  );
 } catch (e) {
  if (typeof console !== "undefined") console.log(e, vbouts);
 }
 return vbouts;
}

總結(jié)

以上所述是小編給大家介紹的vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!


本文題目:vueexcel上傳預(yù)覽和table內(nèi)容下載到excel文件中
新聞來源:http://fisionsoft.com.cn/article/ghhcoh.html