vue3+elementPlus項目支持設置默認附件方式

更新時間：2024年03月14日 08:37:49 作者：念念不忘?必有回響

這篇文章主要介紹了vue3+elementPlus項目支持設置默認附件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

背景

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

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

一. 用到的技術棧

下面演示的項目是：vue3+elementPlus
上傳附件的組件為el-upload
第三方庫：xlsx

二. 代碼解析

自動下載附件

import { saveAs } from 'file-saver';  
import XLSX from 'xlsx';  
  
// 假設你已經(jīng)有了一個數(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)換為二進制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 將二進制字符串轉(zhuǎn)換為Blob對象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 將Blob對象轉(zhuǎn)換為File對象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
  
// 現(xiàn)在你可以使用file對象了，比如保存文件或上傳到服務器  
saveAs(file, 'data.xlsx'); // 使用file-saver保存文件  
  
// 如果你需要上傳這個File對象，你可以將它傳遞給相應的上傳函數(shù)或API  
// uploadFunction(file); // 假設你有一個uploadFunction用于處理文件上傳

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

下載默認附件

const generateExcel = async () => {
  // 假設你已經(jīng)有了一個數(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)換為二進制字符串  
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
// 將二進制字符串轉(zhuǎn)換為Blob對象  
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
  
// 將Blob對象轉(zhuǎn)換為File對象  
const file = new File([blob], 'data.xlsx', { type: blob.type });  
 // 設置默認值
attatch.value =[file]
}