ComponentOne의 2021v2 릴리스에서는 ASP.NET Core 5.0에서 C1WebApi를 사용하여 PDF Web API를 만들기 위한 지원을 추가했습니다. 이러한 지원을 통해 사용자는 C1WebApi에서 .NET Core를 사용하여 PDF Services를 만들 수 있습니다.

PDF Services를 사용하면 다양한 클라이언트가 PDF 문서를 보고 로드하며 캐시하는 데 사용할 수 있는 HTTP 서비스를 빌드할 수 있습니다. 이러한 HTTP 서비스는 REST 기반 API 서비스로, HTML 5 PDFViewer 컨트롤과 통신하여 웹에 PDF 문서를 표시합니다. 클라이언트 응용 프로그램은 PDFDocument 서비스 응용 프로그램에 PDF 파일 로드 또는 내보내기 요청을 전송합니다. 이 서비스는 Word, Excel, RTF, OpenXML, Images로 보고서 내보내기를 지원합니다.

이 문서에서는 ASP.NET Core 5를 사용하여 C1WebApi PDF Services를 만드는 방법과 ComponentOne PdfViewer 컨트롤을 사용하여 해당 서비스를 표시하는 방법을 보여 줍니다.

ASP.NET Core에서 C1WebApi 응용 프로그램 만들기

C1WebApi를 사용하여 PDF로 표시하려면 먼저 Visual Studio에서 C1WebApi 응용 프로그램을 만듭니다.

새 프로젝트를 만들고 ASP.NET Core 템플릿에 적합한 C1 Web Api 응용 프로그램을 선택합니다.

프로젝트의 이름과 위치를 입력합니다.

프로젝트 설정 대화 상자에서 ASP.NET Core 5를 선택하고 PDF Services 체크박스를 선택합니다. 그러면 PDF WebApi를 실행하는 데 필요한 NuGet 패키지가 설치됩니다.

프로젝트가 로드되면 프로젝트의 wwwroot 폴더에 폴더 하나가 생성되는 데 PdfRoot라고 이름을 지정합니다.

이 폴더에는 표시할 PDF가 포함되며 이 폴더를 WebApi로 바인딩합니다. 또한 여러 PDF를 저장하도록 폴더를 여러 개 생성할 수도 있습니다.

필요한 PDF를 이 폴더에 복사합니다. 복사를 마치면 Startup.cs 파일에 다음 코드를 추가합니다.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILoggerFactory loggerFactory)
{
          app.UseC1Api();
          app.UseStaticFiles();
​
          // do not change the name of defaultCulture
          var defaultCulture = "en-US";
          IList<CultureInfo> supportedCultures = new List<CultureInfo>
          {
              new CultureInfo(defaultCulture)
          };
          app.UseRequestLocalization(new RequestLocalizationOptions
          {
              DefaultRequestCulture = new RequestCulture(defaultCulture),
              SupportedCultures = supportedCultures,
              SupportedUICultures = supportedCultures
          });
​
          app.UseMvc();
​
          app.UseStorageProviders()
          .AddDiskStorage("PdfRoot", Path.Combine(env.WebRootPath, "PdfRoot"));
}

그러면 C1WebApi가 활성화되고 PdfRoot 키로 PdfRoot 폴더를 바인딩합니다.

AddDiskStorage 메서드의 첫 번째 매개 변수는 키이고 Combine 메서드의 두 번째 매개 변수는 폴더입니다. 이제 API를 사용하여 PDF에 액세스할 때마다 PdfRoot 키가 사용됩니다.

또한 다른 키를 사용하여 여러 디스크 저장소를 추가하여 다른 폴더의 PDF에도 액세스할 수 있습니다.

프로젝트를 실행하고 다음 URL로 이동합니다.

http://localhost:<port>/api/pdf/PdfRoot/<PDF Name>.pdf/$pdf/status

유사한 결과가 표시되어야 합니다. 다음 JSON은 로드되었는지 여부 또는 PDF 내 페이지 수 등 PDF에 대한 정보를 제공합니다.

ComponentOne ASP.NET Core PdfViewer를 사용하여 서버 저장소에서 PDF 로드 및 보기

C1WebApi가 설정되면 PDFViewer에서 PDF를 표시해야 합니다.

C1 ASP.NET Core의 PDFViewer를 이 용도에 사용할 수 있습니다. PDFViewer는 대화식 기능과 사용자에게 친숙한 사용자 인터페이스를 사용하여 PDF 파일을 볼 수 있는 다양한 옵션을 제공합니다.

PDFViewer는 사용자가 웹 브라우저에 PDF 파일을 표시할 수 있는 빠르고 유연한 HTML5 기반 PDF 뷰어입니다.

Visual Studio의 새 프로젝트 대화 상자에서 C1 ASP.NET Core MVC 응용 프로그램을 선택합니다.

프로젝트의 이름을 입력하고 위치를 설정합니다. 프로젝트 설정 대화 상자에서 ASP.NET Core 5.0을 선택하고 FlexViewer 라이브러리 포함 체크박스를 선택합니다.

그러면 FlexView 지원에 필요한 라이브러리가 모두 설치되고 이에 따라 태그 도우미가 업데이트됩니다.

프로젝트가 로드된 후 /Home/Index.cs 파일에서 다음 코드를 추가하여 PdfViewer를 포함합니다.

<c1-pdf-viewer service-url="http://localhost:<port>/api/pdf" file-path="PdfRoot/<pdf name>.pdf"></c1-pdf-viewer>

service-url은 C1WebApi에 대한 링크여야 합니다. 이 URL의 api/pdf는 C1WebApi에 PDF Services를 사용 중임을 알리는 데 사용됩니다.

파일 경로는 PDF에 대한 경로입니다. PdfRoot는 AddDiskStorage 메서드에서 설정된 키입니다.

프로젝트를 실행하면 PDF에 따라 다음과 유사한 출력이 표시되어야 합니다.

ComponentOne ASP.NET Core PdfViewer를 사용하여 클라이언트 측에서 PDF 로드 및 보기

C1PdfViewer는 클라이언트 브라우저에서 PDF를 업로드하여 PDF 표시 기능을 지원합니다.

이 기능을 지원하기 위해 입력 요소를 사용하여 PDF를 선택하고 WebApi 응용 프로그램 폴더에 업로드하며 WebApi를 사용하여 표시해야 합니다.

다음 입력 요소를 Index.cshtml 파일에 추가합니다. 그러면 선택한 파일 형식이 레이아웃에 추가됩니다.

<div class="row">
  <label>Select a Pdf file: <input type="file" onchange="uploadPdf(this, '@Url.Content("~")')" accept=".pdf" /></label>
  <label id="message" class="errormessage hidden">(Please select a file with extension ".pdf".)</label>
</div>
​
<c1-pdf-viewer width="100%" id="pdfViewer"></c1-pdf-viewer>

파일 경로는 런타임 시 생성되기 때문에 추가하지 않았습니다. 이제 응용 프로그램에 다음 Javascript를 추가합니다.

var lastTempPdf;
function uploadPdf(fileInput, host) {
  var files = fileInput.files;
  if (!files || !files.length) return;
​
  var file = files[0];
  if (!file) return;
​
  if (file.name.slice(-4).toLowerCase() !== '.pdf') {
      return;
  }
​
  var data = new FormData();
  data.append("file", file);
​
  var pdfUrl = "PdfRoot/" + file.name;;
  var url = host + "api/storage/" + pdfUrl;
​
  if (url === lastTempPdf) return;
​
  $.ajax({
      url: url,
      type: 'POST',
      data: data,
      contentType: false,
      processData: false,
      success: function (data, success, obj) {
          deleteTempPdf(true);
          lastTempPdf = url;
          loadPdf(pdfUrl);
      }
  });
}
​
function deleteTempPdf(async) {
  if (!lastTempPdf) {
      return;
  }
​
  $.ajax({
      url: lastTempPdf,
      type: 'DELETE',
      async: async
  });
​
  lastTempPdf = null;
}

uploadPdf 메서드가 선택한 파일이 PDF인지 아닌지 확인합니다. PDF인 경우 C1WebApi로 해당 파일을 전송하면 C1WebApi에서 새 PDF가 PdfRoot 폴더에 저장됩니다.

또한 마지막 PDF도 선택되었는지 확인하고 여러 개의 PDF가 응용 프로그램의 저장 공간을 차지하지 않도록 삭제합니다.

PDF가 업로드되면 표시될 수 있도록 PdfViewer의 경로를 업데이트해야 합니다.

function loadPdf(filePath) {
  var pdfViewer = wijmo.Control.getControl('#pdfViewer');
  pdfViewer.filePath = filePath;
}

getControl 메서드는 C1PdfViewer의 참조를 가져오고 Javascript를 사용하여 서버에서 반환한 filePath 속성을 업데이트합니다.

 filePath가 업데이트되면 C1PdfViewer가 PDF를 자동으로 다시 로드합니다.

PDF에서 검색

C1 PdfViewer에서는 바로 PDF에서 검색할 수 있는 기능을 제공합니다.

왼쪽 패널에서 검색 버튼을 클릭하고 원하는 검색 문자열을 입력한 다음 Enter 키를 누릅니다.

패널에 아래처럼 모든 결과가 표시되고 하나씩 클릭하여 각 결과로 이동할 수 있습니다.

다양한 형식으로 PDF 내보내기

C1PdfViewer는 다양한 형식으로 PDF 내보내기도 지원합니다.

지원되는 형식은 다음과 같습니다.

• Adobe PDF 문서

• HTML SVG 문서

• TIFF, JPG, PNG, BMP 및 GIF 이미지

• Open XML Word 문서

• Open XML Excel 문서

Word 및 Excel 문서에는 이미지도 포함됩니다.

인쇄 버튼 옆에 있는 내보내기 버튼을 클릭합니다. 적절한 형식을 선택하고 (필요한 경우) 정보를 적절하게 입력한 다음 내보내기를 클릭합니다.

결론

이 문서에서는 C1WebApi를 사용하여 PDF Services를 만드는 방법과 PdfViewer에서 PDF를 표시하는 방법을 간단하게 살펴보았습니다.

자세한 내용은 다음 리소스를 참조하세요.

• C1WebApi Pdf Services 문서

• C1PdfViewer 문서

• WebApi Explorer

• 샘플