Prefácio
O Excel tem o maior público na área de escritório e se tornou uma ferramenta insubstituível com suas poderosas funções de processamento e visualização de dados. Ele pode não apenas apresentar dados de forma clara, mas também realizar operações como análise de dados, produção de gráficos e dinamização de dados, fornecendo aos usuários recursos abrangentes de exibição e análise de dados.
Hoje, o editor irá apresentar a você como implementar um modelo de relatório Excel e inserir e preencher dados por meio do controle de tabela de front-end puro SpreadJS da Grape City Company e do componente de tabela de back-end GcExcel.
Preparação ambiental
Editor de formulários on-line SpreadJS
Arquivo de código (pode ser usado como referência para leitura deste artigo)
front-end
Projetar modelo de relatório do Excel
1. Carregue a fonte de dados para fazer relatórios:
Abra o editor de tabela online SpreadJS . Antes de criar o relatório agrupado, você precisa fazer o trabalho de preparação de dados. Clique no botão [Fonte de dados] na guia [Dados] na barra de ferramentas da tabela para adicionar uma fonte de dados para ele.
Use o botão [Adicionar Tabela] para adicionar cada objeto fonte de dados (cada objeto fonte de dados corresponde a uma tabela) e configurar o caminho para ler os dados (o caminho pode ser um endereço que solicita a fonte de dados de formato correspondente, ou pode seja um servidor O endereço solicitado, o servidor retorna um objeto de fonte de dados que está em conformidade com o formato).
O caminho dos dados é um campo opcional. Se o json contiver várias fontes de dados, você poderá distingui-las definindo o caminho dos dados.
2. Adicione modelo de relatório:
Após adicionar a fonte de dados, clique no botão de relatório da guia [Inserir] para inserir um novo modelo de relatório. O objeto de fonte de dados adicionado anteriormente será exibido na lista de fontes de dados à esquerda, conforme mostrado na figura abaixo.
3. Configure relatórios agrupados:
Ao arrastar os campos na lista de fontes de dados à esquerda, você pode criar rapidamente um modelo de relatório que agrupa campos de área de vendas, província, cidade e tipo de produto para contar vendas e lucros, conforme mostrado na figura abaixo:
4. Salve o modelo Excel como um arquivo sjs 
Modificar modelo de relatório do Excel
Depois de salvar o modelo de relatório do Excel como um arquivo .sjs, o editor agora precisa converter algumas células do modelo de relatório do Excel para a linguagem de modelo GcExcel.
Coloque o arquivo .sjs no diretório raiz do código front-end do SpreadJS 
5. Converter modelo Excel em sintaxe de modelo GcExcel
Tomando a célula C4 (província) no modelo de relatório do Excel (conforme mostrado na figura abaixo) como exemplo, o editor primeiro obtém as informações da API do modelo (as informações da fila no DevTools na figura abaixo) por meio do método getBindingPath.
Após obter as informações da API, analise seu caminho de ligação:
//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c) // binding内容如上图
// ...
// 绑定路径
let path = ""
switch (binding && binding.type) {
case "Group":
case "List":
if (binding.binding) {
let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
path += ds + "." + p // path="销售数据.省份"
}
break;
// ...
}
Em seguida, analise seu tipo de mesclagem e direção de expansão:
// Group类型
let group = ""
if (binding && binding.type == "Group") {
group = "G=M"
} else if (binding && binding.type == "List") {
group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
expand = "E=H"
}
Por fim, após integrar essas informações e adicionar colchetes duplos, o conteúdo da célula C4 no arquivo Excel exportado deverá ter a seguinte sintaxe do modelo GcExcel:
{{ds.销售数据.省份(E=V,G=M)}}
6. Execute o projeto front-end e exporte o arquivo de modelo Excel
- Digite o comando [npm install] para baixar as dependências
- Digite o comando [npm run start] para iniciar o projeto (conforme mostrado na figura abaixo após a inicialização)
Por fim, exporte o modelo modificado para um arquivo Excel, conforme mostrado na figura abaixo. Você pode ver que as informações da unidade provincial foram modificadas para a sintaxe do modelo GcExcel.
extremidade traseira
Abra o código back-end do GcExcel e coloque o arquivo de modelo Excel exportado anteriormente no diretório raiz do arquivo de código. A última execução da função principal pode transferir os dados para o arquivo de modelo Excel e, finalmente, um relatório Excel com dados será gerado.
Conclusão
Acima está todo o processo de como usar SpreadJS + GcExcel para criar um relatório Excel. Se quiser saber mais informações, clique aqui para visualizar.
Link de extensão:
A equipe da Google Python Foundation foi demitida. O Google confirmou as demissões, e as equipes envolvidas em Flutter, Dart e Python correram para a lista de favoritos do GitHub - Como as linguagens e estruturas de programação de código aberto podem ser tão fofas? Xshell 8 abre teste beta: suporta protocolo RDP e pode se conectar remotamente ao Windows 10/11 Quando os passageiros se conectam ao WiFi ferroviário de alta velocidade , a "maldição de 35 anos" dos codificadores chineses surge quando eles se conectam à alta velocidade. rail WiFi. A primeira ferramenta de pesquisa de IA do MySQL com suporte de longo prazo versão 8.4 GA Perplexica : Completamente de código aberto e gratuito, uma alternativa de código aberto ao Perplexity Os executivos da Huawei avaliam o valor do código aberto Hongmeng: Ele ainda tem seu próprio sistema operacional, apesar da supressão contínua. por países estrangeiros. A empresa alemã de software automotivo Elektrobit abriu o código-fonte de uma solução de sistema operacional automotivo baseada no Ubuntu.