Location>code7788 >text

JavaScript Magic: The Perfect Solution for Uploading and Downloading Online Excel Attachments

Popularity:129 ℃/2024-08-13 11:18:49

Latest technical resources (recommended favorites)
/resources/

preamble

In the local use of Excel, there is often a need to add some attachment files in Excel needs, such as in Excel with some Word, CAD drawings and so on. Similarly, analogous to the Web side, many people now use online Excel can also be realized as a local operation of the attached files? The answer is yes, but different from the local is that the Web side will not directly open the attachment, but the use of hyperlinks to the form of cells to display, today I will introduce the use of front-end HTML + JS + CSS technology through the hyperlinks to the form of cells to achieve the operation of online Excel attachments to upload, download and modify the operation.

Attachment upload using JS

The realization is divided into four steps:

1. Create front-end page

2 Methodology for the preparation of information for the temporary storage annex

3. Methodology for the preparation of annexed documents for removal

4. Write methods for file saving and file loading

1. Create front-end page

Core Code:

<div style="margin-bottom: 8px">

<button >Upload attachments</button>

<button >Clearance of attachments</button>

<button >File saving</button>

<button >Loading files</button>

<button >download as a package</button>

</div>

<div style="visibility: hidden;position: absolute;top: 100px;left: 300px;z-index: 10; background-color: #eee;padding: 16px">

<label for="choseFile">Select File\</label>

<input type="file" name="choseFile"/>

<button >submit (a report etc)</button>

<button >abolish</button>

</div>

Click the Upload Attachment button to upload the attachment to the corresponding cell, Clear Attachment will clean up all the information of the attachment that has been uploaded, and Packed Download will download all the attachments in a unified way.

2. Methods of storing attached information

This step is mainly used to set up after the file upload cell hyperlinks and tag information. Careful students will notice that here I registered a command, the hyperlink itself will have a jump behavior, write command, will prevent the default jump, go to the execution of the corresponding command. The registered command is mainly used to do the download of attached files.

Core Code:

function hasAttachFile(sheet,row,col,file){

\*\*

\* Attachment file hasAttachFile(sheet,row,col,file)

\* Here because there is no server, so I directly stored the File object, but the File object will only be used in the actual use of the actual file content. In the demo can be

\* In the actual project, you need to upload the file object to the file server.

\* After the upload is complete, the fileInfo in the tag should represent the access address of the file, not the File object.

\*

(row,col.)

(row,col,{

type: hyerlinkType, {

fileInfo: file // In the actual project, fileInfo should be the access path to the uploaded file.

})

(row, col, {

url: ,

linkColor: '#0066cc', { url: , linkColor: '#0066cc', { url.

visitedLinkColor: '#3399ff',

drawUnderline: true,

command: 'downloadAttachFile',

}, );

}

Here, I have introduced a three-way component library, FileSaver, which supports the download of the currently attached file when clicking on a hyperlinked cell.

// Downloading files

().register("downloadAttachFile",{

canUndo: false,

execute: function(context,options,isUndo){

let sheet = ()

let row = ()

let col = ()

let cellTag = (row,col)

(sheet,row,col,cellTag)

if(cellTag && ==hyerlinkType){

\*\\\\\

\* Pure front-end demo, the file exists locally, fileInfo stored in the File object, you can directly get the file

\* Actual project, fileInfo should be uploaded to the file server file access address.

\* So here we need to send a request to get the file blob first, and pass the blob to the second parameter of saveAs.

\*

saveAs(,)

}

}

})

3. Clearance of annexed documents

("removeAttach").onclick = function(){

\*\\\\\\\\\\\\\\\\\\\\\\\

\* Clear Attachment

\* Clearing attachments requires first deleting the file from the remote file server and then clearing the Tag information from the cell.

\* Here the front-end demo demo, only deleted the tag.

\* In the actual project, the fileInfo in the tag should be the path of the file after uploading.

\*

let sheet = ()

let row = ()

let col = ()

().execute({

cmd: "removeAttachFile",

sheet,row,col

})
}

4. Documentation saving/loading

Save the file as a JSON structure:

("fileSaver").onclick = function(){

// Save the file

submitFile = ()

()

(0)

}

Load the saved file:

("loadSubmitFile").onclick = function(){

// Load the saved file

(submitFile)

}

Realization of functions and effects:

In the need to upload attachments in a cell, we can pop up a modal box, in the modal box to upload the file, click submit, you can do a temporary storage of the file, the file information will be stored in the cell's Tag, click on the cell to download the file.

Full code and online demo address:

/share/VHlpNyuP-0CIBNleP5jtyA/

Extended Links:

Spring Boot framework to achieve Excel server-side import and export

Project practice: online quote procurement system (React +SpreadJS+Echarts)

Svelte framework combined with SpreadJS to realize pure front-end class Excel online report design.