1.0.23 • Published 5 months ago

pdf-visualizer v1.0.23

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

PDFVisualizer

A modular PDF visualizer that works as a modal in various JavaScript frameworks.

Installation

// npm install pdf-visualizer
npm install pdf-visualizer

Usage

Vanilla JavaScript

Examples 1

import pdfVisualizer from "pdf-visualizer";

// Create the PDF visualizer basically
await pdfVisualizer.init({
  url: "https://api.syssoftintegra.com/servicios/syssoft/api/reporte/facturacion/venta/pdf/a4/VT0002",
});

Example 2

// Create the PDF visualizer with custom styles and events
await pdfVisualizer.init({
  url: "https://api.syssoftintegra.com/servicios/syssoft/api/reporte/facturacion/venta/pdf/ticket/VT0002",
  title: "PDF Visualizer",
  titlePageNumber: "Página",
  titleLoading: "Cargando PDF...",
  fileName: "Document.pdf",
  styleContent: "background-color: red;",
  styleHeader: "background-color: orange;",
  styleControls: "background-color: yellow;",
  styleBody: "background-color: green;",
  styleTextTitle: "color: red; font-size: 50px;",
  styleTextPageNumber: "color: blue;",
  stylTextZoomInfo: "color: pink;",
  styleTextLoading: "color: green;",
  styleButtonClose: "color: red; padding: 6px;",
  styleButtonPrev: "color: orange;",
  styleButtonNext: "color: purple;",
  styleButtonZoomIn: "color: white;",
  styleButtonZoomOut: "color: brown;",
  styleButtonDownload: "color: black;",
  styleButtonPrint: "color: red;",
  isMoveable: true,
  isClosingOnEscape: true,
  isClosingOnClickOutside: true,
  isDownloadingOnClick: true,
  isPrintingOnClick: true,
  onAfterOpen: () => {
    console.log("PDF opened");
  },
  onBeforeOpen: () => {
    console.log("Opening PDF");
  },
  // Event execute before closing the PDF by not using the function close
  onBeforeClose: () => {
    console.log("Closing PDF");
  },
  // Event execute after closing the PDF by not using the function close
  onAfterClose: () => {
    console.log("PDF closed");
  },
  // Event execute when an error occurs
  onError: (error) => {
    console.log("Error al abrir el PDF:", error);
  },
});
await pdfVisualizer.init({
  url: "https://api.syssoftintegra.com/servicios/syssoft/api/reporte/facturacion/venta/pdf/ticket/VT0002",
  title: "PDF Visualizer",
  titlePageNumber: "Página",
  titleLoading: "Cargando PDF...",
  fileName: "Document.pdf",
  styleContent: "background-color: red;",
  styleHeader: "background-color: orange;",
  styleControls: "background-color: yellow;",
  styleBody: "background-color: green;",
  styleTextTitle: "color: red; font-size: 50px;",
  styleTextPageNumber: "color: blue;",
  stylTextZoomInfo: "color: pink;",
  styleTextLoading: "color: green;",
  styleButtonClose: "color: red; padding: 6px;",
  styleButtonPrev: "color: orange;",
  styleButtonNext: "color: purple;",
  styleButtonZoomIn: "color: white;",
  styleButtonZoomOut: "color: brown;",
  styleButtonDownload: "color: black;",
  styleButtonPrint: "color: red;",
  isMoveable: true,
  isClosingOnEscape: true,
  isClosingOnClickOutside: true,
  isDownloadingOnClick: true,
  isPrintingOnClick: true,
  onAfterOpen: () => {
    console.log("PDF opened");
  },
  onBeforeOpen: () => {
    console.log("Opening PDF");
  },
  // Event execute before closing the PDF by not using the function close
  onBeforeClose: () => {
    console.log("Closing PDF");
  },
  // Event execute after closing the PDF by not using the function close
  onAfterClose: () => {
    console.log("PDF closed");
  },
    // Event execute when an error occurs
  onError: (error) => {
    console.log("Error al abrir el PDF:", error);
  },
});

// Close the PDF visualizer with custom events and example of timeout
setTimeout(() => {
  if (pdfVisualizer.isOpen()) {
    pdfVisualizer.close({
      onBeforeClose: () => {
        console.log("Closing 1 PDF");
      },
      onAfterClose: () => {
        console.log("PDF closed 1");
      },
    });
  }
}, 5000);

// Close the PDF visualizer with custom events
if (pdfVisualizer.isOpen()) {
  pdfVisualizer.close({
    onBeforeClose: () => {
      console.log("Closing 1 PDF");
    },
    onAfterClose: () => {
      console.log("PDF closed 1");
    },
  });
}

Check if the PDF is open or closed

if (pdfVisualizer.isOpen()) {
  console.log("PDF is open");
} else {
  console.log("PDF is closed");
}

React

import React, { useEffect, useRef } from "react";
import pdfVisualizer from "pdf-visualizer";

function PDFVisualizerComponent({ url }) {
  const viewerRef = useRef(null);

  useEffect(() => {
    viewerRef.current = pdfVisualizer;

    return () => {
      if (viewerRef.current) {
        viewerRef.current.close();
      }
    };
  }, [url]);

  const openViewer = async () => {
    if (viewerRef.current) {
      await viewerRef.current.init({
        url: url,
      });
    }
  };

  return <button onClick={openViewer}>Ver PDF</button>;
}

Vue

<template>
  <button @click="openViewer">Ver PDF</button>
</template>

<script>
import pdfVisualizer from "pdf-visualizer";

export default {
  props: ["url"],
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    this.viewer = pdfVisualizer;
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.close();
    }
  },
  methods: {
    openViewer() {
      async if (this.viewer) {
        await this.viewer.init({
          url: this.url,
        });
      }
    },
  },
};
</script>

Angular

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
import pdfVisualizer from "pdf-visualizer";

@Component({
  selector: "app-pdf-viewer",
  template: '<button (click)="openViewer()">Ver PDF</button>',
})
export class PDFVisualizerComponent implements OnInit, OnDestroy {
  @Input() url: string;
  private viewer: any;

  ngOnInit() {
    this.viewer = pdfVisualizer;
  }

  ngOnDestroy() {
    if (this.viewer) {
      this.viewer.close();
    }
  }

  async openViewer() {
    if (this.viewer) {
      await this.viewer.init({
        url: this.url,
      });
    }
  }
}
1.0.22

5 months ago

1.0.23

5 months ago

1.0.20

9 months ago

1.0.19

9 months ago

1.0.18

9 months ago

1.0.17

9 months ago

1.0.16

9 months ago

1.0.15

9 months ago

1.0.14

9 months ago

1.0.13

9 months ago

1.0.12

9 months ago

1.0.11

9 months ago

1.0.10

9 months ago

1.0.9

9 months ago

1.0.8

9 months ago

1.0.7

9 months ago

1.0.6

9 months ago

1.0.5

9 months ago

1.0.4

9 months ago

1.0.3

9 months ago

1.0.2

9 months ago

1.0.1

9 months ago

1.0.0

9 months ago

1.0.0-beta.9

9 months ago

1.0.0-beta.8

9 months ago

1.0.0-beta.7

9 months ago

1.0.0-beta.6

9 months ago

1.0.0-beta.5

9 months ago

1.0.0-beta.4

9 months ago

1.0.0-beta.3

9 months ago

1.0.0-beta.2

9 months ago

1.0.0-beta.1

9 months ago