Resumen: Este artículo es original y fue publicado por primera vez en CSDN por el equipo técnico de Grape City. Indique la fuente de la reimpresión: Sitio web oficial de Grape City.Grape City proporciona a los desarrolladores herramientas, soluciones y servicios de desarrollo profesional para empoderar a los desarrolladores.
Prefacio
Cuando se utiliza Excel localmente, a menudo es necesario agregar algunos archivos adjuntos a Excel, como adjuntar algunos dibujos de Word, CAD, etc. De manera similar, por analogía con la Web, ¿puede el Excel en línea que mucha gente usa ahora también poder operar archivos adjuntos como uno local? La respuesta es sí, pero a diferencia del local, el lado web no abrirá los archivos adjuntos directamente, sino que los mostrará en forma de celdas de hipervínculo. Hoy les presentaré cómo utilizar la tecnología front-end HTML+JS+CSS para utilice hipervínculos Las operaciones de carga, descarga y modificación de archivos adjuntos de Excel en línea se implementan en forma de celdas.
Utilice JS para cargar archivos adjuntos
La implementación se divide en cuatro pasos:
1. Cree una página de inicio
2 métodos para escribir información de archivos adjuntos temporales
3. Escriba un método para borrar archivos adjuntos.
4. Escribir métodos para guardar y cargar archivos.
1. Cree una página de inicio
Código central:
<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>
Haga clic en el botón Cargar archivo adjunto para cargar el archivo adjunto en la celda correspondiente. Borrar archivos adjuntos borrará toda la información del archivo adjunto que se haya cargado. Descarga de paquetes descargará todos los archivos adjuntos de manera uniforme.
2. Método para almacenar temporalmente información adjunta
Este paso se utiliza principalmente para configurar el hipervínculo de la celda y la información de la etiqueta después de cargar el archivo. Los estudiantes atentos notarán que he registrado un comando aquí y el hipervínculo en sí tendrá un comportamiento de salto. Después de escribir el comando, este salto predeterminado se bloqueará y se ejecutará el comando correspondiente. El comando registrado se utiliza principalmente para descargar archivos adjuntos.
Código central:
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);
}
Aquí, presenté la biblioteca de componentes de terceros FileSaver, que puede admitir la descarga del archivo adjunto actual al hacer clic en la celda del hipervínculo.
// 下载文件
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. Borrar archivos adjuntos
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. Guardar/cargar archivos
Guarde el archivo como una estructura JSON:
document.getElementById("fileSaver").onclick = function(){
// 保存文件
submitFile = spread.toJSON()
spread.clearSheets()
spread.addSheet(0)
}
加载已保存文件：
document.getElementById("loadSubmitFile").onclick = function(){
// 加载已保存文件
spread.fromJSON(submitFile)
}
Implementar funciones y efectos:
Cuando necesitamos cargar un archivo adjunto en una celda determinada, podemos abrir un cuadro modal y cargar el archivo en el cuadro modal. Después de hacer clic en enviar, podemos guardar temporalmente el archivo y almacenar la información del archivo en la etiqueta de la celda. , haga clic en la celda para descargar el archivo.
Código completo y dirección de demostración en línea:
https://jscodemine.grapecity.com/share/VHlpNyuP-0CIBNleP5jtyA/
Enlace de extensión:
Implementación de la importación y exportación del servidor Excel bajo el marco Spring Boot
Práctica de proyecto: sistema de adquisición de cotizaciones en línea (React + SpreadJS + Echarts)