新聞中心
這里有您想知道的互聯(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ù)解決您的所有建站問題。
這里會(huì)用到
npm i element-ui npm i xlsx
在vue的template中寫上,排版和css看個(gè)人需求
選擇文件上傳到服務(wù)器
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上傳文件模板
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