淺析Vue3中Excel下載模板并導入數(shù)據(jù)功能的實現(xiàn)
更新時間：2024年05月02日 07:20:19 作者：哪里的破水瓶
這篇文章主要為大家詳細介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導入數(shù)據(jù)功能的實現(xiàn),文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下
上傳功能
代碼一
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
<!--
action 使用 axios 上傳，#號
limit 只允許上傳一個文件
accept 限制格式
on-progress 上傳中回調(diào)方法，做上傳禁用的功能
disabled 禁用開關
auto-upload 禁止自動上傳
on-change 上傳后的處理
-->
<el-upload action="#" :limit="1" accept=".xlsx, .xls" :on-progress="handleFileProgress"
:disabled="upload.isUploading" :auto-upload="false" drag
:on-change="handleChangeUpload">
<!--icon 標簽-->
<el-icon class="el-icon--upload">
<UploadFilled/>
</el-icon>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<span>僅允許導入xls、xlsx格式文件。</span>
<!--下載模版-->
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">
下載模板
</el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<!--確定后下載-->
<el-button type="primary" @click="submitFileForm">確 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</template>
</el-dialog>
代碼二
<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
<el-upload :action="upload.url" ref="uploadRef" :limit="1" accept=".xlsx, .xls"
:on-progress="handleFileProgress"
:disabled="upload.isUploading" :auto-upload="false" drag
:headers="upload.headers" :on-success="handleFileSuccess">
<el-icon class="el-icon--upload">
<UploadFilled/>
</el-icon>
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<span>僅允許導入xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">
下載模板
</el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">確 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</template>
</el-dialog>
/*** 用戶導入?yún)?shù) */
const upload = ref({
open: false,
title: '設備導入',
// 是否禁用上傳
isUploading: false,
headers: { Authorization: 'Bearer ' + getToken() },
url: import.meta.env.VITE_APP_BASE_API + '/ar_check/device/importData'
})
// 打開導入
function handleTeamImport() {
upload.value.open = true
}
// 文件上傳中
function handleFileProgress() {
upload.value.isUploading = true
}
// 文件上傳完成
function handleFileSuccess(response, file) {
upload.value.open = false
upload.value.isUploading = false
proxy.$refs['uploadRef'].handleRemove(file)
proxy.$alert('<div style=\'overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;\'>' +
response.msg + '</div>', '導入結果', { dangerouslyUseHTMLString: true })
getList()
}
// 下載模板
function importTemplate() {
proxy.download('ar_check/device/importTemplate', {}, `device_template_${new Date().getTime()}.xlsx`)
}
// 確定上傳
async function submitFileForm() {
proxy.$refs.uploadRef.submit()
}
介紹一下 POI OOXML 的使用
首先需要創(chuàng)建一個工作薄，這里有幾個注意事項
- HSSF － 提供讀寫Microsoft Excel XLS格式檔案的功能。
- XSSF － 提供讀寫Microsoft Excel OOXML XLSX格式檔案的功能。
- HWPF － 提供讀寫Microsoft Word DOC97格式檔案的功能。
- XWPF － 提供讀寫Microsoft Word DOC2003格式檔案的功能。
- HSLF － 提供讀寫Microsoft PowerPoint格式檔案的功能。
- HDGF － 提供讀Microsoft Visio格式檔案的功能。
- HPBF － 提供讀Microsoft Publisher格式檔案的功能。
- HSMF － 提供讀Microsoft Outlook格式檔案的功能。
在工作頁創(chuàng)建行以及單元格。
// 新建一個工作簿
Workbook workbook = new XSSFWorkbook();
// 創(chuàng)建sheet頁
Sheet sheet = workbook.createSheet();
// 在第三行開始寫
Row row = sheet.createRow(3);
Cell cell = row.createCell(0);
cell.setCellValue("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");
// 合并行，表示表的第三列，結束第三列，合并 0 - 6 行
sheet.addMergedRegion(new CellRangeAddress(3, 3, 0, 8));
// 創(chuàng)建單元格樣式
CellStyle cellStyle = workbook.createCellStyle();
// 設置單元格居中方式---左對齊
cellStyle.setAlignment(HorizontalAlignment.LEFT);
// 應用單元格樣式
cell.setCellStyle(cellStyle);
// 將數(shù)據(jù)寫入到文件中
FileOutputStream fout = new FileOutputStream("D:\\Downloads\\example.xlsx");
workbook.write(fout);
fout.close();
workbook.close();
設置單元格格式以及字體樣式
// 創(chuàng)建單元格樣式 CellStyle cellStyle2 = workbook.createCellStyle(); // 設置單元格居中方式---居中 cellStyle2.setAlignment(HorizontalAlignment.CENTER); // 設置單元格顏色--灰色 cellStyle2.setFillForegroundColor(IndexedColors.GREY_50_PERCENT.getIndex()); // 使用單一顏色填充 cellStyle2.setFillPattern(FillPatternType.SOLID_FOREGROUND); // 字體格式 Font font = workbook.createFont(); // 加粗 font.setBold(true); // 設置顏色--白色 font.setColor(IndexedColors.WHITE.getIndex()); // 將字體設置到樣式上 cellStyle2.setFont(font); // 最后單元格使用樣式 t1.setCellStyle(cellStyle2);
最后輸出到指定位置
// 創(chuàng)建一個文件輸出流，用于將工作簿寫入文件
FileOutputStream fout = new FileOutputStream("D:\\Downloads\\example.xlsx");
// 將工作簿寫入文件流
workbook.write(fout);
// 關閉文件流
fout.close();
// 關閉工作簿
workbook.close();
獲取 excel 的圖片
圖片是獨立的，根據(jù)單元格的位置獲取
InputStream inputStream = Files.newInputStream(Paths.get("D:\\Downloads\\device_template_1714287622392.xlsx"));
XSSFWorkbook workbook = new XSSFWorkbook(inputStream);
// 獲取第一個 sheet 表
XSSFSheet sheet = workbook.getSheetAt(0);
if (sheet == null) {
throw new IOException("損壞的文件！");
}
// 獲取繪圖包
XSSFDrawing drawing = sheet.getDrawingPatriarch();
if (drawing != null) {
// 獲取所有圖形形狀
List<XSSFShape> shapes = drawing.getShapes();
for (XSSFShape shape : shapes) {
// 形狀獲取對應的圖片數(shù)據(jù)
XSSFPicture picture = (XSSFPicture) shape;
XSSFPictureData pictureData = picture.getPictureData();
//圖片形狀在工作表中的位置, 所在行列起點和終點位置
XSSFClientAnchor anchor = (XSSFClientAnchor) shape.getAnchor();
// 行
short col1 = anchor.getCol1();
// 列
int row1 = anchor.getRow1();
//文件擴展名
String suffix = pictureData.suggestFileExtension();
// 文件格式
String mimeType = pictureData.getMimeType();
// 文件數(shù)據(jù)
byte[] data = pictureData.getData();
// 轉換成 MultipartFile 進行文件上傳，參數(shù)一和參數(shù)二是文件名，參數(shù)三是類型，參數(shù)四是字節(jié)數(shù)據(jù)
MultipartFile multipartFile = new MockMultipartFile("", "", mimeType, data);
}
}
下載模板功能實現(xiàn)
首先后端完成上面的excel 文件格式內(nèi)容等
前端調(diào)用 SpringMvc 接口
import { saveAs } from 'file-saver'
try {
const downloadLoadingInstance = ElLoading.service({ text: '正在下載數(shù)據(jù)，請稍候', background: 'rgba(0, 0, 0, 0.7)' })
// 發(fā)送 POST 請求到指定的 URL，獲取響應數(shù)據(jù)
const data = await service.post(url, {}, {
// 設置請求頭為 'application/x-www-form-urlencoded'
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
// 設置響應類型為 Blob
responseType: 'blob'
})
// 如果響應數(shù)據(jù)存在
if (data) {
// 檢查響應數(shù)據(jù)是否為 Blob 類型---是否是JSON
const isBlob = blobValidate(data)
if (isBlob) {
// 如果是 Blob 類型，則創(chuàng)建 Blob 對象并保存為文件
const blob = new Blob([data])
saveAs(blob, filename)
}
}
// 關閉加載動畫
downloadLoadingInstance.close()
} catch (error) {
console.error(error)
// 顯示下載文件錯誤信息
ElMessage.error('下載文件出現(xiàn)錯誤，請聯(lián)系管理員！')
// 關閉加載動畫
downloadLoadingInstance.close()
}
上傳導入
需要創(chuàng)建一個輸入流來讀取 execel 文件。
getLastRowNum 獲取有文本內(nèi)容的最后一行列的索引，因為我這里前五行是解釋內(nèi)容，所以 == 5 表示沒有數(shù)據(jù)。
如果是前端傳遞的，要這樣寫 MultipartFile 的 getInputStream 方法獲取流
InputStream inputStream = Files.newInputStream(Paths.get("D:\\Downloads\\team_template_1714287622392.xlsx"));
Workbook workbook = WorkbookFactory.create(inputStream);
// 獲取第一個 sheet 表
Sheet sheet = workbook.getSheetAt(0);
if (sheet == null) {
throw new IOException("損壞的文件！");
}
if (sheet.getLastRowNum() == 5) {
throw new IOException("導入班組數(shù)據(jù)不能為空！");
}
由于 poi ooxml 讀取數(shù)據(jù)需要指定類型很麻煩，我做了一個方法轉換
/**
* 將單元格的值以字符串形式返回。
*
* @param cell 單元格對象
* @return 字符串形式的單元格值，如果單元格為 null，則返回空字符串
*/
public static String getCellValueAsString(Cell cell) {
if (cell == null) {
return "";
}
switch (cell.getCellType()) {
case NUMERIC:
// 如果單元格類型為數(shù)字，將數(shù)字轉換為字符串并去除空格
return String.valueOf((long) cell.getNumericCellValue()).trim();
case BOOLEAN:
// 如果單元格類型為布爾值，將布爾值轉換為字符串并去除空格
return String.valueOf(cell.getBooleanCellValue()).trim();
case STRING:
// 如果單元格類型為字符串，直接返回字符串并去除空格
return cell.getStringCellValue().trim();
case FORMULA:
// 如果單元格是公式，將計算結果作為字符串返回，并去除空格
return cell.getCellFormula().trim();
case BLANK:
// 如果單元格為空，返回空字符串
return "";
case ERROR:
// 如果單元格是錯誤類型，返回錯誤碼作為字符串
return String.valueOf(cell.getErrorCellValue());
default:
// 其他類型的單元格返回空字符串
return "";
}
}
以上就是淺析Vue3中Excel下載模板并導入數(shù)據(jù)功能的實現(xiàn)的詳細內(nèi)容，更多關于Vue3 Excel下載模板并導入數(shù)據(jù)的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了在vant中使用時間選擇器和popup彈出層的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了vuex 閑置狀態(tài)重置方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
teleport 傳送門組件，提供一種簡潔的方式，可以指定它里面的內(nèi)容的父元素，也就是說teleport 中的內(nèi)容允許我們控制在任意的DOM中，使用簡單，對VUE 3 teleport傳送門相關知識感興趣的朋友一起看看吧2021-10-10
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導入而直接使用的，使用的時候是自己全局注冊組件時的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue如何實現(xiàn)垂直居中，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vuex是專為Vue.js應用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
關于vue利用postcss-pxtorem進行移動端適配的問題
這篇文章主要介紹了關于vue利用postcss-pxtorem進行移動端適配的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了在vite項目中使用@進行文件的引入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3+elementPlus二次封裝表單的實現(xiàn)代碼
最近使用Vue3+ElementPlus開發(fā)項目，從整體上構思組件的封裝。能寫成組件的內(nèi)容都進行封裝，方便多個地方使用，這篇文章給大家介紹了vue3+elementPlus二次封裝表單的實現(xiàn)，并通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03