Vista previa simple de archivos PDF en línea basada en la solución de dominio cruzado pdf.js, ¡buena compatibilidad!
contenido principal
Vista previa de archivos PDF en línea en el terminal móvil basado en pdf.js, admite código fuente de dominio cruzado, tiene una gran compatibilidad, no está restringido por los navegadores y también puede convertir archivos PDF en imágenes.
Prerrequisitos
- Debe tener control sobre los dos dominios, ¡esto es muy importante! (La razón por la que hay un problema de dominio cruzado, lo verifiqué, siento que es principalmente por la seguridad de la red, después de todo, en realidad, también hay una declaración de límites divisorios, pero también hay personas increíbles que puede ocupar dos campos, por lo que debemos resolver el problema del dominio cruzado. Dominio)
- Este artículo está basado en PHP, pero otros lenguajes son igualmente factibles;
Implementación
1. Introduzca pdf.js
P.ej:
<script src="pdf.js" type="text/javascript"></script>
<script src="pdf.worker.js" type="text/javascript"></script>
2. Obtenga el número total de páginas del archivo pdf
P.ej:
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pages = pdf.numPages;//获取总页数
for(var i = 1;i < pdf.numPages;i++){//循环输出
}
});
3. Obtenga el contenido de cada página
Por ejemplo (consulte la API oficial para 1 parámetros específicos):
function showall(url,page,id){
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(page).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
4. Problemas entre dominios (importante)
Para pdf.js, si desea resolver problemas entre dominios unilateralmente, solo puede decir que tiene una capacidad limitada. Si desea resolverlo, debe comenzar desde el lado del servidor modificando el encabezado http a encabezado (' Access-Control-Allow-Origin: * '). ¿Por qué? Puede Baidu usted mismo.
Configuración del servidor PHP test.php
function sendfile( $fullPath ){
$fsize = filesize($fullPath);
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: application/pdf");
header('Access-Control-Allow-Origin:*');
header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".$fsize);
ob_clean();
flush();
readfile( $fullPath );
}
Configuración del cliente
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lightbox {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.close {
position: relative;
z-index: 10;
text-align: center;
color: red;
font-size: 18px;
}
.pop {
position: relative;
text-align: center;
z-index: 9;
}
.pop canvas {
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
<h1><a href="http://XXXXXXXXXXX/test.php">下载pdf文档</a></h1>
<div id="container" style="display: none;">
<div class="lightbox"></div>
<div id="close" class="close">关闭</div>
<div id="pop" class="pop"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="pdf.js" type="text/javascript"></script>
<script src="pdf.worker.js" type="text/javascript"></script>
<script type="text/javascript">
function showall(url, page, id) {
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
console.log(pdf.numPages);
pdf.getPage(page).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
function showPdf() {
var url = 'http://XXXXXXXXXXX/test.php';//pdf文件地址
$("#container").show();
$("#pop").empty();
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pages = pdf.numPages;
for(var i = 1; i < pdf.numPages; i++) {
var id = 'page-id-' + i;
$("#pop").append('<canvas id="' + id + '"></canvas>');
showall(url, i, id);
}
});
}
$("#close").click(function() {
$("#container").hide();
});
</script>
</html>
5. Vista previa del efecto