序言

前端模塊的導(dǎo)入導(dǎo)出excel功能，大體分為兩個(gè)邏輯。

1. 前端使用導(dǎo)入組件，獲取excel，交給后端處理
2. 前端使用導(dǎo)入組件，獲取excel，自己解析數(shù)據(jù)，然后調(diào)用數(shù)據(jù)存儲(chǔ)的方法。

我們分別對(duì)這兩種方法進(jìn)行記錄。

后端處理

導(dǎo)出

組件：

<el-button type="primary" @click="downloadGlossary">Download</el-button>

方法:

const downloadGlossary = () => {
  downGlossary({})
}

api：

export function downGlossary(data) {
    return download("/conf/asr/glossary/export", data,"Vocabulary.xls")
}

util：

export function download(url, params, filename, config) {
  let downloadLoadingInstance = ElLoading.service({ text: "download，wait...", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    headers: { 'Content-Type': 'application/json' },
    responseType: 'blob',
    ...config
  }).then(async (data) => {
    const isLogin = blobValidate(data);
    if (isLogin) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      ElMessage.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    ElMessage.error(r)
    downloadLoadingInstance.close();
  })
}

導(dǎo)入

組件：

<el-upload
   :action="upload.url"
    class="upload"
    accept=".xlsx, .xls"
    :show-file-list="false"
    :multiple="false"
    :on-success="afterUpload"
    :on-error="afterUpload"
>
  <el-button type="primary">Upload</el-button>
</el-upload>

const upload = {
  // 設(shè)置上傳的請(qǐng)求頭部
  // headers: { Authorization: "Bearer " + getToken() },
  // 上傳的地址
  url: `${import.meta.env.VITE_APP_BASE_API}/conf/asr/glossary/import?userId=${localStorage.getItem('userData') ? JSON.parse(localStorage.getItem('userData')).userId : ''}`,
}

方法：

const afterUpload = res=> {
  if (res.success) {
    ElMessage.success('Upload Success!');
    getGlossaryData()
    return
  }
  ElMessage.error(res.message)
}

自己解析

工具方法：

import * as XLSX from "xlsx" // 需要npm install
import FileSaver from "file-saver";  // 需要npm install

export function readExcelToJson(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            let data = new Uint8Array(e.target.result);
            let workbook = XLSX.read(data, { type: "array" });
            //將Excel 第一個(gè)sheet內(nèi)容轉(zhuǎn)為json格式
            let worksheet = workbook.Sheets[workbook.SheetNames[0]];
            let json = XLSX.utils.sheet_to_json(worksheet);
            resolve(json);
        };
        reader.readAsArrayBuffer(file);
    });
}
export function saveJsonToExcel(data, filename) {
    let sheet = XLSX.utils.json_to_sheet(data);
    let workbook = {
        SheetNames: ["sheet1"],
        Sheets: {
            sheet1: sheet,
        },
    };
    let wbout = XLSX.write(workbook, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        filename
    );
}

導(dǎo)入

組件寫(xiě)法：(這里用的elementPlus)

<el-upload
	class="upload"
	accept=".xlsx, .xls"
	:show-file-list="false"
	:multiple="false"
	:before-upload="handleGlossaryUpload"
>
	<el-button type="primary">Upload</el-button>
</el-upload>

方法代碼：

const handleGlossaryUpload = (uploadFile) => {
  // 格式錯(cuò)誤時(shí)直接退出上傳。
  if (uploadFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && uploadFile.type !== 'application/vnd.ms-excel'){
    ElMessage.error('文件格式錯(cuò)誤！')
    return false
  }
  readExcelToJson(uploadFile).then(res => {
  	// res即為解析excel后的數(shù)據(jù)
    res.map(item => {
      addGlossary(item) // 調(diào)用新增數(shù)據(jù)的方法
    })
    ElMessage.success('上傳成功！')
  }).catch((err) => {
    ElMessage.error('上傳失?。?)
  })
}

導(dǎo)出

組件代碼：

<el-button type="primary" @click="downloadGlossary">Download</el-button>

方法代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-531331.html

const downloadGlossary = () => {
  const storage = JSON.parse(localStorage.getItem('glossaryRes')) || []  // 獲取json格式數(shù)據(jù)源
  const jsonData = storage.length ? storage : [{A: 'demo',B: 'omed', id: 0}]
  const newJsonData = jsonData.map(({id, ...rest}) => rest)
  saveJsonToExcel(JSON.parse(JSON.stringify(newJsonData)),'Vocabulary.xls')
}

到了這里，關(guān)于前端導(dǎo)入導(dǎo)出excel記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！