Antecedentes del proyecto
Cargar y mostrar archivos PDF en páginas web es el requisito empresarial más común. La mayoría de los navegadores actuales vienen con una función de vista previa de PDF, pero el cargador de PDF de cada navegador es diferente y la barra de herramientas no se puede personalizar. Para unificar la coherencia de las vistas previas de PDF en diferentes navegadores y agregar algunas funciones personalizadas, usamos pdf.js para implementar la vista previa en PDF.
pdf.js es una excelente herramienta de análisis de PDF. De hecho, el analizador de vista previa de PDF que viene con el núcleo de nuestro navegador Firefox es pdf.js. Cuando abrimos el PDF en Firefox y presionamos F12, podemos ver el contenido del código fuente. .
El siguiente es el efecto final de la implementación del proyecto: solo queda el botón Imprimir en la barra de herramientas derecha y los eventos requeridos por el proyecto se activan al imprimir para evitar la copia y descarga de PDF.
Uso de pdf.js
Dirección del sitio web oficial: http://mozilla.github.io/pdf.js, descargue la versión estable
Estructura del proyecto
Uso del proyecto
Implemente el proyecto en nginx o IIS y acceda a Viewer.html directamente en el navegador para obtener una vista previa de nuestro PDF. El uso es el siguiente, el archivo es la dirección del archivo PDF que queremos obtener una vista previa.
127.0.0.1/pdfjs-2.14.305-dist/web/viewer.html?file=/pdfjs-2.14.305-dist/web/compressed.tracemonkey-pldi-09.pdf
Personalización del proyecto
Necesitamos eliminar muchos botones innecesarios en la barra de herramientas derecha y editar los eventos de los botones. Podemos usar el objeto PDFViewerApplication para realizar ajustes.
window.onload = function () {
PDFViewerApplication.appConfig.toolbar.presentationModeButton.classList.add("hidden");
PDFViewerApplication.appConfig.toolbar.openFile.classList.add("hidden");
PDFViewerApplication.appConfig.toolbar.download.classList.add("hidden");
PDFViewerApplication.appConfig.toolbar.viewBookmark.classList.add("hidden");
}
function onbeforeprint() {
var url = GetQuery1("file");
var urlParams = parseUrlParams(url);
$.ajax({
type: "get",
url: "/PrintCount?sCardNos=" + urlParams.sCardNos,
success: function (data) { }
});
}
window.addEventListener("beforeprint", onbeforeprint);Implementación del proyecto
La implementación en IIS requiere agregar tipo MIME.properties texto/plain
otro
Para deshabilitar la impresión automática durante la vista previa, comente el siguiente código en el método de Viewer.js _updateFromSandbox.
