Create a blank Vue and ASP.NET Core application.

• Open Visual Studio .NET 2022 and create a new application of "Vue and ASP.NET Core" type:
  
  
• Configure the application to use .NET 8.0:
  

Server side: Add references to the Vintasoft assemblies to "VueApp1.Server" project.

Server side: Specify drawing engine, which should be used by VintaSoft Imaging .NET SDK for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Drawing.SkiaSharp.dll assembly.
• Add reference to the SkiaSharp nuget-package version 2.88.9.
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use SkiaSharp library for drawing of 2D graphics.

• Add reference to the Vintasoft.Imaging.Gdi.dll assembly.
• Open "Program.cs" file in "VueApp1.Server" project, add code line "Vintasoft.Imaging.Drawing.Gdi.GdiGraphicsFactory.SetAsDefault();" at the beginning of file - added code specifies that VintaSoft Imaging .NET SDK should use System.Drawing library for drawing of 2D graphics.

Server side: Create web services, which allow to upload/download file, manage image collection, get information about images, get thumbnails, render image tiles, extract/search text and annotate document.

• Create web service that allows to upload/download file

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftFileApiController" and press the "Add" button
    
  • Specify that MyVintasoftFileApiController class is derived from Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController class
    
    Here are source codes of MyVintasoftFileApiController class:
    
    • C#

    namespace VueApp1.Server.Controllers
    {
        public class MyVintasoftFileApiController : Vintasoft.Imaging.AspNetCore.ApiControllers.VintasoftFileApiController
        {
            public MyVintasoftFileApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

• Create web service that allows to edit XLSX document

  • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
    
  • Select "Empty API controller" template, set the controller name to the "MyVintasoftOfficeApiController" and press the "Add" button
    
  • Specify that MyVintasoftOfficeApiController class is derived from Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController class
    
    Here are source codes of MyVintasoftOfficeApiController class:
    
    • C#

    namespace VueApp1.Server.Controllers
    {
        public class MyVintasoftOfficeApiController : Vintasoft.Imaging.Office.AspNetCore.ApiControllers.VintasoftOfficeApiController
        {
            public MyVintasoftOfficeApiController(IWebHostEnvironment hostingEnvironment)
                : base(hostingEnvironment)
            {
            }
        }
    }
    
    

Server side: Create CORS-policy that allows to access web services from client side.

• Open the "Program.cs" file in "VueApp1.Server" project and add code that:
  • Creates CORS-policy that allows to access web services from "localhost"
  • Enables CORS usage in "VueApp1.Server" project
  
  Here are source codes of "Program.cs" file after update:
  
  • C#

  Vintasoft.Imaging.Drawing.SkiaSharp.SkiaSharpDrawingFactory.SetAsDefault();
  
  var builder = WebApplication.CreateBuilder(args);
  
  // Add services to the container.
  
  builder.Services.AddControllers();
  
  builder.Services.AddCors(options =>
  {
      options.AddPolicy(name: "CorsPolicy1", policy =>
      {
          policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowAnyHeader().AllowAnyMethod();
      });
  });
  
  var app = builder.Build();
  
  app.UseDefaultFiles();
  app.UseStaticFiles();
  
  // Configure the HTTP request pipeline.
  
  app.UseHttpsRedirection();
  
  app.UseAuthorization();
  
  app.UseCors("CorsPolicy1");
  
  app.MapControllers();
  
  app.MapFallbackToFile("/index.html");
  
  app.Run();
  
  

Server side: Update launch URL in 'launchSettings.json' file.

• Open file "Properties\launchSettings.json" in "VueApp1.Server" and clear launch URL:
  

Server side: Copy XLSX documents to a server side.

• Create folder "UploadedImageFiles\SessionID" in "VueApp1.Server" project and copy test XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\UploadedImageFiles\SalesReport.xlsx" to the "UploadedImageFiles\SessionID" folder. This document will be displayed in spreadsheet document editor.
  
  
• Create folder "Resources" in "VueApp1.Server" project and copy XLSX document "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\Resources\ChartSource.xlsx" to the "Resources" folder. This document will be used as a source for "standard" charts when chart is adding to spreadsheet document using "Add chart" dialog.

Compile the project for restoring dependencies using 'npm'.

Delete files, which are not necessary in this tutorial.

• Delete files "WeatherForecast.cs" and "Controllers\WeatherForecastController.cs" in "VueApp1.Server" project - the WeatherForecast Web API controller is not necessary in this tutorial.
  
  
• Delete files "src\components\TheWelcome.vue", "src\components\WelcomeItem.vue" in "vueapp1.client" project - this Vue-component is not necessary in this tutorial.

Client side: Add JavaScript files to the "vueapp1.client" project.

• Copy Vintasoft.Shared.js, Vintasoft.Imaging.js and Vintasoft.Imaging.Office.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Copy files Vintasoft.Imaging.css and Vintasoft.Imaging.Office.css from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
  
  
• Specify, which "standard" dialogs (password dialog, print dialog, etc) should be used by web spreadsheet document editor
  • If web spreadsheet document editor should use ready-to-use "standard" Bootstrap dialogs:
    • Add "bootstrap" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
      Here are source codes of "package.json" file after update:
      
      • JSON

      {
        "name": "vueapp1.client",
        "version": "0.0.0",
        "private": true,
        "type": "module",
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "preview": "vite preview",
          "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
        },
        "dependencies": {
          "vue": "^3.4.21",
          "bootstrap": "5.3.3"
        },
        "devDependencies": {
          "@vitejs/plugin-vue": "^5.0.4",
          "eslint": "^8.57.0",
          "eslint-plugin-vue": "^9.23.0",
          "vite": "^5.2.8"
        }
      }
      
      

    • Copy Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.Office.Dialogs.Bootstrap.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder to the root folder of "vueapp1.client" project.
    
    
  • If web spreadsheet document editor should use ready-to-use "standard" jQuery UI dialogs:
    • Add "jquery-ui-dist" Node-module to the "package.json" file. Rebuild the project for refreshing Node-modules.
    • Copy Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.Office.Dialogs.jQueryUI.js files from "<InstallPath>\VintaSoft Imaging .NET 14.0\Bin\JavaScript\" folder into "src\app\assets\" folder.
    
    
  • If web spreadsheet document editor should use custom "standard" dialogs, please read how to create custom "standard" dialogs here.
    
    
• Add references to Vintasoft JavaScript files to the header of "index.html" file in "vueapp1.client" project.
  Add links to the Vintasoft CSS-files to the "index.html" file in "vueapp1.client" project.
  Add link to the "bootstrap.css" file to the "index.html" file in "vueapp1.client" project.
  
  
  Here are source codes of "index.html" file after update:
  
  • HTML

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="icon" href="/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vite App</title>
  
      <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css" />
      <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.css">
      <link rel="stylesheet" type="text/css" href="public/Vintasoft.Imaging.Office.css">
  
      <script src="public/Vintasoft.Shared.js" type="text/javascript"></script>
      <script src="public/Vintasoft.Imaging.js" type="text/javascript"></script>
      <script src="public/Vintasoft.Imaging.Office.js" type="text/javascript"></script>
      <script src="public/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
      <script src="public/Vintasoft.Imaging.Office.Dialogs.Bootstrap.js" type="text/javascript"></script>
  </head>
    <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
    </body>
  </html>
  
  

Client side: Create Vue-component that allows to edit a spreadsheet (XLSX) document.

• In "vueapp1.client" project in folder "src\components\" create "SpreadsheetDocumentEditorDemo.vue" file that will contain source codes of Vue-component:
  • Select "Add => New Item..." context menu for folder "src\components\" in "vueapp1.client" project => "Add new item" dialog will appear
  • Install template "Vue TypeScript Template" from internet if template is not installed in Visual Studio
  • Select "Vue TypeScript Template" type for new item
  • Set "SpreadsheetDocumentEditorDemo.vue" as element name
  • Click the "Add" button => dialog will be closed and file "SpreadsheetDocumentEditorDemo.vue" will be added into folder "src\components\"
  
  In SpreadsheetDocumentEditorDemo.vue file add template that represents demo header and div-element that will display spreadsheet document editor:
  
  
  In SpreadsheetDocumentEditorDemo.vue file change script type from TypeScript to JavaScript:
  
  
  In SpreadsheetDocumentEditorDemo.vue file add 'mounted' function (contains JavaScript code that initializes and creates web spreadsheet document editor):
  
  
  In SpreadsheetDocumentEditorDemo.vue file add CSS-style for Vue-component:
  
  
  Important: Visual Studio uses randomized network port for ASP.NET Core API and you need to update JavaScript code and change web services URL from "https://localhost:7058/" to URL in your application.
  
  Here is HTML/CSS/JavaScript code of SpreadsheetDocumentEditorDemo Vue-component:
  
  • JavaScript

  <template>
      <h1>VintaSoft Spreadsheet Document Editor (Vue + ASP.NET Core)</h1>
  
      <div id="spreadsheetDocumentEditorContainer" className="spreadsheetDocumentEditorContainer"></div>
  </template>
  
  <script lang="js">
      import { defineComponent } from 'vue';
  
      export default defineComponent({
          mounted() {
              // set the session identifier
              Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionId");
  
              // specify web services, which should be used in this demo
              Vintasoft.Shared.WebServiceJS.defaultFileService = new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7058/vintasoft/api/MyVintasoftFileApi");
              Vintasoft.Shared.WebServiceJS.defaultOfficeService = new Vintasoft.Shared.WebServiceControllerJS("https://localhost:7058/vintasoft/api/MyVintasoftOfficeApi");
  
              // create the spreadsheet document editor control settings
              var spreadsheetDocumentEditorControlSettings = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlSettingsJS("spreadsheetDocumentEditorContainer", "");
  
              // create the spreadsheet document editor control
              var spreadsheetDocumentEditorControl = new Vintasoft.Imaging.Office.UI.WebSpreadsheetDocumentEditorControlJS(spreadsheetDocumentEditorControlSettings);
  
              var fileId = "SalesReport.xlsx";
              // copy the file from global folder to the session folder
              spreadsheetDocumentEditorControl.openDocument(fileId);
          }
      });
  </script>
  
  <style scoped>
      h1 {
          text-align: center;
      }
  
      .spreadsheetDocumentEditorContainer {
          height: 800px;
      }
  </style>
  
  

  
  
• Add created Vue-component to the Vue-application code - "src\App.vue" file.
  
  
  Here are source codes of "App.vue" file after update:
  
  • JavaScript

  <script setup>import SpreadsheetDocumentEditorDemo from './components/SpreadsheetDocumentEditorDemo.vue'</script>
  
  <template>
      <main>
          <SpreadsheetDocumentEditorDemo />
      </main>
  </template>
  
  <style scoped>
  </style>
  
  

Run the Vue and ASP.NET Core application and see the result.