vue3+elementPlus project supports generation and setting default attachment methods

background

The requirements in our projects often jump from one page to another, such as page a jumping to page b, and after going to page b, bring the data of page a over, or echo the data.

But can we add the data of page a and then use it as the default attachment of page b? The answer is yes.

1. The technology stack used

The following project is: vue3+elementPlus

The component that uploads the attachment is el-upload

Third-party library: xlsx

2. Code analysis

1. Automatically download attachments

import { saveAs } from 'file-saver';  
import XLSX from 'xlsx';  
  
// Suppose you already have a data arrayconst data = [  
  // ...Your data];  
  
// Create Excel workbooks and worksheetsconst workbook = .book_new();  
const worksheet = .json_to_sheet(data);  
  
// Add worksheet to workbook.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// Convert workbook to binary stringconst wbout = (workbook, { bookType: 'xlsx', type: 'array' });  
  
// Convert binary string to Blob objectconst blob = new Blob([wbout], { type: 'application/' });  
  
// Convert Blob object to File objectconst file = new File([blob], '', { type:  });  
  
// Now you can use file objects, such as saving files or uploading them to the serversaveAs(file, ''); // Use file-saver to save the file  
// If you need to upload this File object, you can pass it to the corresponding upload function or API// uploadFunction(file); // Suppose you have an uploadFunction for processing file uploads

saveAs(file, ‘’) is the function of downloading excel

2. Download and set the default attachment

const generateExcel = async () =&gt; {
  // Suppose you already have a data arrayconst data = [  
  // ...Your data];  

// appendixconst attatch = ref([])
  
// Create Excel workbooks and worksheetsconst workbook = .book_new();  
const worksheet = .json_to_sheet(data);  
  
// Add worksheet to workbook.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
// Convert workbook to binary stringconst wbout = (workbook, { bookType: 'xlsx', type: 'array' });  
  
// Convert binary string to Blob objectconst blob = new Blob([wbout], { type: 'application/' });  
  
// Convert Blob object to File objectconst file = new File([blob], '', { type:  });  
 // Set default values =[file]
}

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.