Abstract: This article is original and first published on CSDN by the Grape City technical team. Please indicate the source for reprinting: Grape City official website . Grape City provides developers with professional development tools, solutions and services to empower developers.
Preface
When using Excel locally, there is often a need to add some attachment files to Excel, such as attaching some Word, CAD drawings, etc. to Excel. Similarly, by analogy to the Web, can the online Excel that many people use now also be able to operate attached files like a local one? The answer is yes, but unlike the local one, the web side will not open attachments directly, but will display them in the form of hyperlink cells. Today I will introduce to you how to use front-end HTML+JS+CSS technology to use hyperlinks. The online Excel attachment upload, download and modification operations are implemented in the form of cells.
Use JS to upload attachments
The implementation is divided into four steps:
1. Create a front-end page
2 Methods to write temporary attachment information
3. Write a method to clear attachment files
4. Write methods for file saving and file loading
1. Create a front-end page
Core code:
<div style="margin-bottom: 8px">
<button id="uploadAttach">上传附件</button>
<button id="removeAttach">清除附件</button>
<button id="fileSaver">文件保存</button>
<button id="loadSubmitFile">加载文件</button>
<button id="loadPackage">打包下载</button>
</div>
<div id="fileOperate" style="visibility: hidden;position: absolute;top: 100px;left: 300px;z-index: 10; background-color: #eee;padding: 16px">
<label for="choseFile">选择文件\</label>
<input type="file" id="choseFile" name="choseFile"/>
<button id="submit">提交</button>
<button id="cancel">取消</button>
</div>
Click the Upload Attachment button to upload the attachment to the corresponding cell. Clearing Attachments will clear out all attachment information that has been uploaded. Package Download will download all attachments uniformly.
2. Method of temporarily storing attachment information
This step is mainly used to set the cell hyperlink and tag information after the file is uploaded. Careful students will notice that I have registered a command here, and the hyperlink itself will have a jump behavior. After writing the command, this default jump will be blocked and the corresponding command will be executed. The registered command is mainly used to download attachment files.
Core code:
function hasAttachFile(sheet,row,col,file){
\*\*
\* 附件文件暂存
\* 这里由于没有服务端，所以我直接存了File对象,但File对象只有在实际使用时才会去获取实际的文件内容。在demo中可行
\* 在实际项目中，需要将file对象上传到文件服务器中
\* 上传完成后tag中的fileInfo应该代表的是文件的访问地址，而不能再是File对象。
\*
sheet.setValue(row,col,file.name)
sheet.setTag(row,col,{
type: hyerlinkType,
fileInfo: file // 实际项目中fileInfo应该为上传完成文件的访问路径
})
sheet.setHyperlink(row, col, {
url: file.name,
linkColor: '#0066cc',
visitedLinkColor: '#3399ff',
drawUnderline: true,
command:'downloadAttachFile',
}, GC.Spread.Sheets.SheetArea.viewport);
}
Here, I introduced the third-party component library FileSaver, which can support the download of the current attachment file when clicking on the hyperlink cell.
// 下载文件
spread.commandManager().register("downloadAttachFile",{
canUndo: false,
execute: function(context,options,isUndo){
let sheet = context.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
let cellTag = sheet.getTag(row,col)
console.log(sheet,row,col,cellTag)
if(cellTag && cellTag.type==hyerlinkType){
\*\*\*
\* 纯前端demo，文件存在于本地，fileInfo中存储的是File对象，可以直接获取到文件
\* 实际项目中，fileInfo应该是上传到文件服务器上的文件访问地址。
\* 因此这里需要发送请求，先获取文件blob,将获取的blob传递到saveAs的第二个参数中。
\*
saveAs(cellTag.fileInfo,cellTag.fileInfo.name)
}
}
})
3. Clear attachment files
document.getElementById("removeAttach").onclick = function(){
\*\*\*
\* 清除附件
\* 清除附件需要先删除远程文件服务器的文件，之后清除单元格的Tag信息。
\* 这里前端演示demo，只删除了tag。
\* 实际项目中tag中的fileInfo应该是文件上传后的路径
\*
let sheet = spread.getActiveSheet()
let row = sheet.getActiveRowIndex()
let col = sheet.getActiveColumnIndex()
spread.commandManager().execute({
cmd:"removeAttachFile",
sheet,row,col
})
}
4. File saving/loading
Save the file as a JSON structure:
document.getElementById("fileSaver").onclick = function(){
// 保存文件
submitFile = spread.toJSON()
spread.clearSheets()
spread.addSheet(0)
}
加载已保存文件：
document.getElementById("loadSubmitFile").onclick = function(){
// 加载已保存文件
spread.fromJSON(submitFile)
}
Implement functions and effects:
When we need to upload an attachment in a certain cell, we can pop up a modal box and upload the file in the modal box. After clicking submit, we can make a temporary save of the file and store the file information in the tag of the cell. , click on the cell to download the file.
Complete code and online Demo address:
https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/
Extension link:
Implementing Excel server import and export under the Spring Boot framework
Project practice: online quotation procurement system (React + SpreadJS + Echarts)
Svelte framework combined with SpreadJS implements pure front-end Excel online report design