資訊專欄INFORMATION COLUMN
摘要：我想實(shí)現(xiàn)讀取一個(gè)本地的文件然后顯示在網(wǎng)頁上一開始選擇的方法是建個(gè)通過發(fā)送請(qǐng)求來實(shí)現(xiàn)但是覺得只是讀取一個(gè)本地文件還要搞個(gè)太復(fù)雜了最終還是通過模塊實(shí)現(xiàn)了讀取本地文件無需后端步驟如下通過新建項(xiàng)目編寫分析的腳本將行列轉(zhuǎn)換讀出來的數(shù)據(jù)很難讀轉(zhuǎn)換為格
我想實(shí)現(xiàn)讀取一個(gè)本地的xlsx文件(task_list.xlsx)然后顯示在網(wǎng)頁上, 一開始選擇的方法是建個(gè)express server, 通過發(fā)送axios請(qǐng)求來實(shí)現(xiàn), 但是覺得只是讀取一個(gè)本地文件還要搞個(gè)server太復(fù)雜了, 最終還是通過"xlsx"模塊 + axios實(shí)現(xiàn)了讀取本地文件, 無需后端, 步驟如下:
1.通過vue-cli新建項(xiàng)目:
2.編寫分析excel workbook的腳本
/src/scripts/read_xlsx.js
const XLSX = require("xlsx")
//將行,列轉(zhuǎn)換
function transformSheets(sheets) {
var content = []
var content1 = []
var tmplist = []
for (let key in sheets){
//讀出來的workbook數(shù)據(jù)很難讀,轉(zhuǎn)換為json格式,參考https://github.com/SheetJS/js-xlsx#utility-functions
tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length)
content1.push(XLSX.utils.sheet_to_json(sheets[key]))
}
var maxLength = Math.max.apply(Math, tmplist)
//進(jìn)行行列轉(zhuǎn)換
for (let y in [...Array(maxLength)]){
content.push([])
for (let x in [...Array(tmplist.length)]) {
try {
for (let z in content1[x][y]){
content[y].push(content1[x][y][z])
}
} catch (error) {
content[y].push(" ")
}
}
}
content.unshift([])
for (let key in sheets){
content[0].push(key)
}
return content
}
export {transformSheets as default}
3.新建一個(gè)組件
/src/components/task_list.vue
{{err}}
{{h}} {{item}}
效果就是這樣,編程新手,就這個(gè)東西斷斷續(xù)續(xù)搞了快一周了...github地址 https://github.com/LeviDeng/t...
希望能有幫助,喜歡的給個(gè)star吧
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109918.html
摘要：鼠標(biāo)按下拖拽多選單元格這個(gè)是本唯一的亮點(diǎn)了個(gè)人認(rèn)為。這樣做的結(jié)果是頁面非?？ǎ?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件，會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。 網(wǎng)頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個(gè)網(wǎng)頁版的Excel，剛開始聽說要做這么一個(gè)東西的時(shí)候瞬間覺得公司領(lǐng)導(dǎo)高(sang)瞻(xin)遠(yuǎn)(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實(shí)主要目的是...
摘要：鼠標(biāo)按下拖拽多選單元格這個(gè)是本唯一的亮點(diǎn)了個(gè)人認(rèn)為。這樣做的結(jié)果是頁面非常卡，因?yàn)槭髽?biāo)移動(dòng)過程會(huì)多次觸發(fā)鼠標(biāo)移動(dòng)事件，會(huì)多次進(jìn)行單元格元素循環(huán)遍歷。 網(wǎng)頁版模仿Excel 最近公司閑的dan疼，非要模仿Excel做一個(gè)網(wǎng)頁版的Excel，剛開始聽說要做這么一個(gè)東西的時(shí)候瞬間覺得公司領(lǐng)導(dǎo)高(sang)瞻(xin)遠(yuǎn)(bing)矚(kuang)，只能頭鐵的接下了，那就開始干。其實(shí)主要目的是...
摘要：而這里的單元格信息是唯一的，所以直接通過為一個(gè)空對(duì)象賦值即可。和相關(guān)的知識(shí)和技巧高亮的列單元格采用展示。在中，被選中的單元格會(huì)高亮相應(yīng)的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個(gè) Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對(duì) Excel 數(shù)據(jù)進(jìn)行篩選。 XCEL...
摘要：遠(yuǎn)程讀取會(huì)有許多限制，防止引起不必要的安全隱患。比較時(shí)可以把點(diǎn)去掉轉(zhuǎn)為數(shù)字類型比較腳本執(zhí)行完畢下載前可以拿到更新日志時(shí)間版本號(hào)和包大小，下載時(shí)可以拿到速度。然后開啟該項(xiàng)目的構(gòu)建。將第一步生成的填至項(xiàng)目環(huán)境變量，參數(shù)名為。 父母都是做出納相關(guān)的工作，希望我能給他們做個(gè)簡(jiǎn)單的進(jìn)銷存，在上班的時(shí)候使用。開發(fā)一個(gè)不需要花錢買服務(wù)器，不需要依賴網(wǎng)絡(luò)（更新除外），單機(jī)版的程序，對(duì)于前端出身的我來說...
閱讀 3242·2021-10-13 09:40
閱讀 3725·2019-08-30 15:54
閱讀 1322·2019-08-30 13:20
閱讀 3003·2019-08-30 11:26
閱讀 487·2019-08-29 11:33
閱讀 1113·2019-08-26 14:00
閱讀 2371·2019-08-26 13:58
閱讀 3381·2019-08-26 10:39
