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