1.0.23 • Published 6 months ago

pdf-visualizer v1.0.23

Weekly downloads
-
License
MIT
Repository
github
Last release
6 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

6 months ago

1.0.23

6 months ago

1.0.20

10 months ago

1.0.19

10 months ago

1.0.18

10 months ago

1.0.17

10 months ago

1.0.16

10 months ago

1.0.15

10 months ago

1.0.14

10 months ago

1.0.13

10 months ago

1.0.12

10 months ago

1.0.11

10 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago

1.0.0-beta.9

10 months ago

1.0.0-beta.8

10 months ago

1.0.0-beta.7

10 months ago

1.0.0-beta.6

10 months ago

1.0.0-beta.5

10 months ago

1.0.0-beta.4

10 months ago

1.0.0-beta.3

10 months ago

1.0.0-beta.2

10 months ago

1.0.0-beta.1

10 months ago