1.0.23 • Published 6 months ago
pdf-visualizer v1.0.23
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
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",
});
// 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