Usar o Vue para criar um suplemento do painel de tarefas do Excel

  • Artigo

Neste artigo, você passará pelo processo de criar um suplemento do painel de tarefas do Excel usando o Vue e a API JavaScript do Excel.

Pré-requisitos

  • Node.js (a versão mais recente de LTS). Visite o siteNode.js para baixar e instalar a versão certa para seu sistema operacional.

  • A versão mais recente do Yeoman e do Yeoman gerador de Suplementos do Office. Para instalar essas ferramentas globalmente, execute o seguinte comando por meio do prompt de comando.

    npm install -g yo generator-office

    Observação

    Mesmo se você já instalou o gerador Yeoman, recomendamos atualizar seu pacote para a versão mais recente do npm.

  • Office conectado a uma assinatura Microsoft 365 (incluindo o Office na web).

    Observação

    Se você ainda não tiver o Office, poderá se qualificar para uma assinatura de desenvolvedor Microsoft 365 E5 por meio do Programa de Desenvolvedor do Microsoft 365; para obter detalhes, confira as perguntas frequentes. Como alternativa, você pode se inscrever para uma avaliação gratuita de 1 mês ou comprar um plano do Microsoft 365.

  • Instale a CLI do Vue globalmente. No terminal, execute o seguinte comando.

    npm install -g @vue/cli

Gerar um novo aplicativo Vue

Use a CLI do Vue para gerar um novo aplicativo Vue.

vue create my-add-in

Em seguida, selecione a predefinição Default para " Vue 3" (se preferir, escolha " Vue 2").

Gerar o arquivo de manifesto.

Cada suplemento requer um arquivo de manifesto para definir os recursos e configurações.

  1. Navegue até a pasta do seu aplicativo.

    cd my-add-in

  2. Use o gerador do Yeoman para gerar o arquivo de manifesto para o seu suplemento.

    yo office

    Observação

    Ao executar o comando yo office, você receberá informações sobre as políticas de coleta de dados de Yeoman e as ferramentas da CLI do suplemento do Office. Use as informações fornecidas para responder às solicitações como achar melhor. Se você escolher Sair em resposta à segunda solicitação, será necessário executar o comando yo office novamente quando estiver pronto para criar seu projeto de suplemento.

    Quando solicitado, forneça as informações a seguir para criar seu projeto de suplemento.

    • Escolha um tipo de projeto:Office Add-in project containing the manifest only
    • O que você deseja nomear seu suplemento?My Office Add-in
    • Qual aplicativo cliente do Office você gostaria de dar suporte?Excel

    A interface da linha de comando Gerador Yeoman para Suplementos do Office, com o tipo de projeto definido como somente manifesto.

Após a conclusão, o assistente cria uma pasta Meu suplemento do Office contendo um arquivo manifest.xml. Você usará o manifesto para realizar o sideload e testar o suplemento.

Dica

Você pode ignorar as orientações da próximas etapas fornecidas pelo gerador Yeoman após a criação do projeto de suplemento. As instruções passo a passo deste artigo fornecem todas as orientações necessárias para concluir este tutorial.

Proteger o aplicativo

Embora não seja estritamente obrigatório em todos os cenários de suplemento, é altamente recomendável o uso do ponto de extremidade do HTTPS para o suplemento. Os suplementos que não estiverem protegidos por SSL (HTTPS) geram erros e avisos de conteúdo não seguro durante o uso. Se você planeja executar seu suplemento no Office na Web ou publicar seu suplemento no AppSource, ele deve estar protegido por SSL. Se o suplemento acessar serviços e dados externos, ele deve estar protegido por SSL para proteger os dados em trânsito. Certificados autoassinados podem ser usados para desenvolvimento e teste, desde que sejam aceitos como confiáveis no computador local.

  1. Habilite HTTPS para seu aplicativo. Na pasta raiz do projeto Vue, crie um arquivo vue.config.js com o conteúdo a seguir.

    const fs = require("fs");
const path = require("path");
const homedir = require('os').homedir()

module.exports = {
  devServer: {
    port: 3000,
    https: {
      key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
      cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
      ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
     }
   }
}

  2. Instale os certificados do suplemento.

    npx office-addin-dev-certs install

Explore o projeto

O projeto de suplemento que você criou com o gerador Yeoman contém um código de exemplo para um suplemento básico do painel de tarefas. Se você quiser examinar os principais componentes do seu projeto de suplemento, abra o projeto no seu editor de código e revise os arquivos listados abaixo. Quando estiver pronto para experimentar o suplemento, prossiga para a próxima seção.

  • O arquivo manifest.xml no diretório raiz do projeto define as configurações e os recursos do suplemento. Para saber mais sobre o arquivo manifest.xml arquivo, consulte manifesto XML de suplementos do Office.
  • O arquivo ./src/App.vue contém a marcação HTML para o painel de tarefas, o CSS aplicado ao conteúdo no painel de tarefas e o código da API JavaScript do Office que facilita a interação entre o painel de tarefas e o Excel.

Atualizar o aplicativo

  1. Abra o arquivo ./public/index.html e adicione o seguinte marca <script> antes da marca </head>.

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

  2. Abra manifest.xml e localize as <bt:Urls> marcas dentro da <marca Recursos> . Localize a marca <bt:Url> com a IDTaskpane.Url e atualize seu atributo DefaultValue. O novo DefaultValue é https://localhost:3000/index.html. Toda a marca atualizada deve corresponder à linha a seguir.

    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />

  3. Abra ./src/main.js e substitua os conteúdos pelo código a seguir.

    import { createApp } from 'vue'
import App from './App.vue'

window.Office.onReady(() => {
    createApp(App).mount('#app');
});

  4. Abra ./src/App.vue e substitua os conteúdos de arquivo pelo código a seguir.

    <template>
  <div id="app">
    <div class="content">
      <div class="content-header">
        <div class="padding">
          <h1>Welcome</h1>
        </div>
      </div>
      <div class="content-main">
        <div class="padding">
          <p>
            Choose the button below to set the color of the selected range to
            green.
          </p>
          <br />
          <h3>Try it out</h3>
          <button @click="onSetColor">Set color</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      onSetColor() {
        window.Excel.run(async context => {
          const range = context.workbook.getSelectedRange();
          range.format.fill.color = 'green';
          await context.sync();
        });
      }
    }
  };
</script>

<style>
  .content-header {
    background: #2a8dd4;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
  }

  .content-main {
    background: #fff;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
  }

  .padding {
    padding: 15px;
  }
</style>

Inicie o servidor de desenvolvimento

  1. Inicie o servidor de desenvolvimento.

    npm run serve

  2. Em um navegador da web, acesse https://localhost:3000 (observe o https). Se a página no https://localhost:3000 estiver em branco e sem erros de certificado, significa que ela está funcionando. O Aplicativo Vue é montado após a inicialização do Office, portanto, ele só mostra itens dentro de um ambiente do Excel.

Experimente

  1. Execute o suplemento e o sideload do suplemento no Excel. Siga as instruções para a plataforma que você usará:

  2. Abra o painel de tarefas do suplemento no Excel. Na faixa de opções da guia Página Inicial, escolha o botão Mostrar Painel de Tarefas.

    O menu Início do Excel, com o botão Mostrar painel de tarefas realçado.

  3. Selecione um intervalo de células na planilha.

  4. Defina a cor do intervalo selecionado como verde. No painel de tarefas do suplemento, escolha o botão Definir cor.

    O painel de tarefas do suplemento está aberto no Excel.

Próximas etapas

Parabéns, você criou com êxito um suplemento do painel de tarefas do Excel usando o Vue. Em seguida, saiba mais sobre os recursos de um suplemento do Excel e crie um suplemento mais complexo seguindo as etapas deste tutorial de suplemento do Excel.

Tutorial de suplemento do Excel

Solução de problemas

Confira também