Visualização simples do arquivo pdf online com base na solução de domínio cruzado pdf.js, boa compatibilidade!
conteúdo principal
A visualização do arquivo pdf online no terminal móvel com base em pdf.js, suporta código-fonte de domínio cruzado, tem forte compatibilidade, não é restrita por navegadores e também pode converter PDF em imagens.
Pré-requisitos
- Deve ter controle sobre os dois domínios, isso é muito importante! (O motivo de haver um problema de domínio cruzado, eu verifiquei, sinto que é principalmente para a segurança da rede, afinal, na realidade, há também uma declaração de limites de divisão, mas também há pessoas incríveis que pode ocupar dois campos, então devemos resolver o problema de domínio cruzado. Domínio)
- Este artigo é baseado em PHP, mas outras linguagens são igualmente viáveis;
Implementação
1. Apresente o pdf.js
Por exemplo:
<script src="pdf.js" type="text/javascript"></script>
<script src="pdf.worker.js" type="text/javascript"></script>
2. Obtenha o número total de páginas do arquivo pdf
Por exemplo:
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pages = pdf.numPages;//获取总页数
for(var i = 1;i < pdf.numPages;i++){//循环输出
}
});
3. Obtenha o conteúdo de cada página
Por exemplo (consulte a 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 domínios (importante)
Para pdf.js, se você quiser resolver problemas de domínio cruzado unilateralmente, você só pode dizer que tem capacidade limitada. Se quiser resolvê-lo, você deve começar do lado do servidor, modificando o cabeçalho http para cabeçalho (' Access-Control-Allow-Origin: * '). Por que isso? Você pode usar o Baidu sozinho.
Configuração do 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 );
}
Configuração de 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. Visualização do efeito