@sapientia-inc/pdf-neural-viewer

Biblioteca TypeScript para buscar documentos na API PDF Neural e renderizá-los, no ponto em que o visualizador é instanciado. Funciona com JavaScript/TypeScript puro, Vue 3 e Angular 16+.

Instalação

npm install @sapientia-inc/pdf-neural-viewer

Cliente e JavaScript puro

import { PdfNeuralClient, PdfNeuralViewer } from '@sapientia-inc/pdf-neural-viewer';

const client = new PdfNeuralClient({
  baseUrl: 'https://api.pdf-neural.com',
  auth: { token: () => getToken() } // ou { apiKey: 'sua-chave' }
});

const viewer = new PdfNeuralViewer(document.querySelector('#documento')!, client, {
  height: '80vh'
});

await viewer.load('document-id');
// Ao desmontar a página: viewer.destroy();

Por padrão é feito GET {baseUrl}/documents/{id}/pdf. Para outro contrato:

const client = new PdfNeuralClient({
  baseUrl: 'https://api.exemplo.com/v1',
  documentPath: id => `/pdf/${encodeURIComponent(id)}/content`,
  parseResponse: async response => (await response.json()).signedUrl
});

parseResponse pode retornar URL, Blob, ArrayBuffer ou Uint8Array.

Também é possível buscar token ou API key diretamente no Keycloak:

const client = new PdfNeuralClient({
  baseUrl: 'https://api.pdf-neural.com',
  auth: {
    keycloak: {
      baseUrl: 'https://sso.exemplo.com',
      realm: 'pdf-neural',
      clientId: 'pdf-viewer',
      clientSecret: 'segredo',
      params: { audience: 'pdf-neural-api' }
    }
  }
});

Por padrão o cliente usa access_token como Bearer token. Para usar uma API key retornada pelo Keycloak:

const client = new PdfNeuralClient({
  baseUrl: 'https://api.pdf-neural.com',
  auth: {
    keycloak: {
      tokenUrl: 'https://sso.exemplo.com/realms/pdf-neural/protocol/openid-connect/token',
      clientId: 'pdf-viewer',
      clientSecret: 'segredo',
      credentialType: 'apiKey',
      responseField: 'api_key',
      apiKeyHeader: 'X-API-Key'
    }
  }
});

Operações da API PDF Neural

Além do carregamento de PDF usado pelo viewer, o cliente expõe as operações REST do contrato OpenAPI do PDF Neural. As rotas usam o prefixo /api por padrão; se o baseUrl já terminar em /api, o prefixo não é duplicado. Para outro prefixo, use apiPathPrefix.

const client = new PdfNeuralClient({
  baseUrl: 'https://api.pdf-neural.com',
  auth: { apiKey: 'sua-chave' }
});

const tenants = await client.listTenants();
const tenant = await client.createTenant({ name: 'Cliente A' });
const groups = await client.listTenantGroups(tenant.tenant_id);
const category = await client.createDocumentCategory(tenant.tenant_id, groups[0].group_id, {
  name: 'Contratos'
});

const documents = await client.listDocuments({
  tenant_id: tenant.tenant_id,
  group_id: groups[0].group_id,
  category_id: category.category_id,
  page: 1,
  page_size: 20
});

const document = await client.getStoredDocument(documents.items[0].document_id, {
  tenant_id: tenant.tenant_id,
  group_id: groups[0].group_id
});

Métodos disponíveis:

• Identidade e acesso: getCurrentUser, listUserAccess, grantUserAccess, revokeUserAccess
• Organização: listTenants, createTenant, listTenantGroups, createTenantGroup, listDocumentCategories, createDocumentCategory
• Documentos: listDocuments, getStoredDocument, deleteDocument, updateDocumentCategory, renameDocument, updateDocumentFields
• Versões: listDocumentVersions, getDocumentVersion, setCurrentDocumentVersion, deprecateDocumentVersion, restoreDocumentVersion
• Processamento: convertPdf, listJobs, createJob, getJob

getDocument() continua reservado para carregar a fonte renderizável do viewer. Para a operação JSON GET /api/documents/{document_id}, use getStoredDocument().

Para endpoints ainda não encapsulados ou extensões internas, use request():

const health = await client.request('/health', { responseType: 'text' });

Vue 3

<script setup lang="ts">
import { PdfNeuralClient, PdfNeuralVue } from '@sapientia-inc/pdf-neural-viewer/vue';

const client = new PdfNeuralClient({ baseUrl: '/api' });
</script>

<template>
  <PdfNeuralVue
    :client="client"
    document-id="123"
    :options="{ height: '80vh' }"
    @error="console.error"
  />
</template>

Angular

import { Component } from '@angular/core';
import { PdfNeuralAngularComponent, PdfNeuralClient } from '@sapientia-inc/pdf-neural-viewer/angular';

@Component({
  standalone: true,
  imports: [PdfNeuralAngularComponent],
  template: `
    <pdf-neural-viewer
      [client]="client"
      documentId="123"
      [options]="{ height: '80vh' }"
      (viewerError)="onError($event)"
    />
  `
})
export class DocumentPage {
  client = new PdfNeuralClient({ baseUrl: '/api' });
  onError(error: unknown) { console.error(error); }
}

Para aplicações Angular baseadas em módulos, importe PdfNeuralModule.

Fonte direta

Nos componentes Vue/Angular, a propriedade source aceita uma URL, Blob, ArrayBuffer ou Uint8Array. Quando source e documentId são informados, source tem prioridade.

O navegador precisa permitir a exibição de PDF e a API deve estar com CORS configurado para a origem da aplicação.