Syncfusion AI Assistant

How can I help you?

Create and Run a Custom PDF Viewer Web Service (Vue)

28 Apr 20262 minutes to read

This guide explains how to create and run your own PDF Viewer web service and connect it to the server-backed Vue PDF Viewer component. Hosting your own web service is recommended for production environments.

Prerequisites

  • .NET SDK 6.0 or 8.0
  • Basic knowledge of ASP.NET Core
  • Server-backed Vue PDF Viewer application

Steps to run the PDF Viewer web service

Step 1: Download the web service sample

Download the sample from the GitHub repository:

GitHub Web Service Sample

Step 2: Open the ASP.NET Core project

Extract the downloaded sample and navigate to the ASP.NET Core folder using a command prompt or terminal.

Step 3: Choose the .NET version

Navigate to the appropriate folder based on your installed .NET version:

Step 4: Restore required packages

Run the following command to restore the NuGet packages:

dotnet restore

Step 5: Run the Web Service

Start the web service using the following command:

dotnet run

Step 6: Verify the Service is Running

The PDF Viewer server instance will run on localhost:5001. You can verify it by navigating to http://localhost:5001/pdfviewer in your browser, which returns the default GET response.

Configure Your Vue Application

Once your web service is running, configure your Vue PDF Viewer component to use the local service URL:

  export default {
    name: 'app',
    data () {
      return {
        <!--
          Specifies the backend service URL that processes and streams PDF data
        -->   
        serviceUrl:"https://localhost:5001/pdfviewer",
        <!--
          Defines the source of the PDF to load in the PDF Viewer.
          Accepts either a public URL or a Base64-encoded PDF string.
        --> 
        documentPath:"PDF_Succinctly.pdf"
      };
    }}

Additional Resources

NOTE

For production deployment, ensure you configure proper security, CORS policies, and hosting settings for your web service.