快捷導(dǎo)航

vue3+elementPlus項(xiàng)目支持生成、設(shè)置默認(rèn)附件方式

更新時(shí)間：2024年03月19日 09:01:55 投稿：jingxian

這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持生成、設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

背景

我們項(xiàng)目中的需求經(jīng)常會(huì)有跳轉(zhuǎn)從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的情況，比如a頁(yè)面跳轉(zhuǎn)到b頁(yè)面，到b頁(yè)面之后將a頁(yè)面的數(shù)據(jù)帶過(guò)來(lái)，或者回顯數(shù)據(jù)。

但是能夠把a(bǔ)頁(yè)面的數(shù)據(jù)進(jìn)行加上，然后當(dāng)作b頁(yè)面的默認(rèn)附件嗎？答案是肯定的。

一. 用到的技術(shù)棧

下面演示的項(xiàng)目是：vue3+elementPlus

上傳附件的組件為el-upload

第三方庫(kù)：xlsx

二. 代碼解析

1.自動(dòng)下載附件

import { saveAs } from 'file-saver';  
import XLSX from 'xlsx';  
  
// 假設(shè)你已經(jīng)有了一個(gè)數(shù)據(jù)數(shù)組data  
const data = [  
  // ...你的數(shù)據(jù)  
];  
  
// 創(chuàng)建Excel工作簿和工作表  
const workbook = XLSX.utils.book_new();  
const worksheet = XLSX.utils.json_to_sheet(data);  
  
// 將工作表添加到工作簿  
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// 將工作簿轉(zhuǎn)換為二進(jìn)制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 將二進(jìn)制字符串轉(zhuǎn)換為Blob對(duì)象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 將Blob對(duì)象轉(zhuǎn)換為File對(duì)象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
  
// 現(xiàn)在你可以使用file對(duì)象了，比如保存文件或上傳到服務(wù)器  
saveAs(file, 'data.xlsx'); // 使用file-saver保存文件  
  
// 如果你需要上傳這個(gè)File對(duì)象，你可以將它傳遞給相應(yīng)的上傳函數(shù)或API  
// uploadFunction(file); // 假設(shè)你有一個(gè)uploadFunction用于處理文件上傳

saveAs(file, ‘data.xlsx’)為下載excel的功能

2.下載并設(shè)置默認(rèn)附件

const generateExcel = async () => {
  // 假設(shè)你已經(jīng)有了一個(gè)數(shù)據(jù)數(shù)組data  
const data = [  
  // ...你的數(shù)據(jù)  
];  

// 附件
const attatch = ref([])
  
// 創(chuàng)建Excel工作簿和工作表  
const workbook = XLSX.utils.book_new();  
const worksheet = XLSX.utils.json_to_sheet(data);  
  
// 將工作表添加到工作簿  
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// 將工作簿轉(zhuǎn)換為二進(jìn)制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 將二進(jìn)制字符串轉(zhuǎn)換為Blob對(duì)象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 將Blob對(duì)象轉(zhuǎn)換為File對(duì)象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
 // 設(shè)置默認(rèn)值
attatch.value =[file]
}