Html JQuery PDF Viewer可在web和移动浏览器中逐页显示PDF，PDF流可从安全的REST api获取_Html_Jquery_Ajax_Pdf Viewer

Html JQuery PDF Viewer可在web和移动浏览器中逐页显示PDF，PDF流可从安全的REST api获取

html jquery ajax

Html JQuery PDF Viewer可在web和移动浏览器中逐页显示PDF，PDF流可从安全的REST api获取,html,jquery,ajax,pdf-viewer,Html,Jquery,Ajax,Pdf Viewer,我正在尝试将pdf流显示到网页中。通过ajax请求从安全RESTAPI获取Pdf流，我不想让最终用户在本地系统上保存Pdf，只允许查看 PHP-API[pdfViewer.PHP]下面是我的pdf流API <?php $error = ""; header("Access-Control-Allow-Origin: *"); header('Access-Control-Allow-Methods: POST'); header("Acce

我正在尝试将pdf流显示到网页中。通过ajax请求从安全RESTAPI获取Pdf流，我不想让最终用户在本地系统上保存Pdf，只允许查看

PHP-API[pdfViewer.PHP]下面是我的pdf流API

<?php
$error = "";
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: POST');
header("Access-Control-Allow-Headers: *");
        
if(!empty($_POST)){
    
     if ($_POST['KeyCode'] == generateKey()) {
             
           }else {
              $error = "KeyCode Not Match";
           }         

    $file = urldecode($_POST["file"]); // Decode URL-encoded string

    if(empty($error)){//preg_match('/^[^.][-a-z0-9_.]+[a-z]$/i', $file)

        $filepath = "files/" . $file;
    
        // Process download
        if(file_exists($filepath)) {
            
            header('Content-Description: File Transfer');
            header('Content-Type: application/pdf');
            header('Content-Disposition: inline');
            header('Expires: 0');
            header('Cache-Control: must-revalidate');
            header('Pragma: public');
            header('Content-Length: ' . filesize($filepath));
            
            flush(); // Flush system output buffer
            readfile($filepath);
            die();
        } else {
            http_response_code(404);
            die();
        }
    } else {
        die("Invalid file name!");
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>My PDF Viewer</title>
</head>
<body>
    <div id="pdf-main-container">
        <div id="pdf-loader">Loading document ...</div>
        <div id="pdf-contents">
            <div id="pdf-meta">
                <div id="pdf-buttons">
                    <button id="pdf-prev">Previous</button>
                    <input id="current_page" value="1" type="number" />
                    <button id="pdf-next">Next</button>
                </div>
                <div id="zoom_controls">
                    <button id="zoom_in">+</button>
                    <button id="zoom_out">-</button>
                </div>
                <div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>
            </div>
            <div id="canvas_container">
                <canvas id="pdf-canvas" width="400"></canvas>
                <div id="page-loader">Loading page ...</div>
            </div>
        </div>
    </div>
    <script src="js/pdf.min.js"></script>
    <script src="js/pdf.worker.min.js"></script>

    <script type="text/javascript">
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

        var _PDF_DOC, _CURRENT_PAGE, _TOTAL_PAGES, _PAGE_RENDERING_IN_PROGRESS = 0,_SCALE=1.0, _CANVAS = document.querySelector('#pdf-canvas');

        // initialize and load the PDF
        function showPDF(pdf_url,postdata) {
            document.querySelector("#pdf-loader").style.display = 'block';
            // get handle of pdf document
            try {
                $.ajax({
                    type: 'POST',
                    url: pdf_url,
                    cache: false,
                    method: "POST",
                    data: postdata,
                }).done(function(res){

                    var loadingTask = pdfjsLib.getDocument({data:res} );
                    loadingTask.promise.then(function(pdf) {

                        // total pages in pdf
                        _TOTAL_PAGES = pdf.numPages;

                        // Hide the pdf loader and show pdf container
                        document.querySelector("#pdf-loader").style.display = 'none';
                        document.querySelector("#pdf-contents").style.display = 'block';
                        document.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES;

                        // show the first page
                        showPage(pdf,1);
                    });

                    alert('FileLoaded');
                }).fail(function (res){
                    alert('File not found.')
                });

                // _PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
                // var loadingTask = pdfjsLib.getDocument(pdf_url );

            }
            catch(error) {
                alert(error.message);
            }
        }

        // load and render specific page of the PDF
        async function showPage(pdf,page_no) {
            _PAGE_RENDERING_IN_PROGRESS = 1;
            _CURRENT_PAGE = page_no;

            // disable Previous & Next buttons while page is being loaded
            document.querySelector("#pdf-next").disabled = true;
            document.querySelector("#pdf-prev").disabled = true;

            // while page is being rendered hide the canvas and show a loading message
            document.querySelector("#pdf-canvas").style.display = 'none';
            document.querySelector("#page-loader").style.display = 'block';

            // update current page
            document.querySelector("#pdf-current-page").innerHTML = page_no;

            // get handle of page
            try {

                pdf.getPage(page_no).then(function(page) {

                    var viewport = page.getViewport({ scale: _SCALE, });

                    // original width of the pdf page at scale 1
                    var pdf_original_width = page.getViewport(_SCALE).width;

                    _CANVAS.height = viewport.height;
                    _CANVAS.width = viewport.width;

                    // as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
                    var scale_required = _CANVAS.width / pdf_original_width;

                    
                    // setting page loader height for smooth experience
                    document.querySelector("#page-loader").style.height =  _CANVAS.height + 'px';
                    document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';

                    var render_context = {
                        canvasContext: _CANVAS.getContext('2d'),
                        viewport: viewport
                    };

                    // render the page contents in the canvas
                    try {
                        page.render(render_context);

                        document.querySelector("#pdf-canvas").style.display = 'block';
                        document.querySelector("#page-loader").style.display = 'none';
                    }
                    catch(error) {
                        alert(error.message);
                    }

                    _PAGE_RENDERING_IN_PROGRESS = 0;

                    // re-enable Previous & Next buttons
                    document.querySelector("#pdf-next").disabled = false;
                    document.querySelector("#pdf-prev").disabled = false;

                });
            }
            catch(error) {
                alert(error.message);
            }
        }

        showPDF('http://localhost:8080/pdfViewer.php',{file:'as.pdf',KeyCode:'abcd123456'});

    
    </script>
</body>
</html>

现在我的html页面使用javascript显示pdf流。我正在使用pdfjsLib api来显示pdf流

<?php
$error = "";
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: POST');
header("Access-Control-Allow-Headers: *");
        
if(!empty($_POST)){
    
     if ($_POST['KeyCode'] == generateKey()) {
             
           }else {
              $error = "KeyCode Not Match";
           }         

    $file = urldecode($_POST["file"]); // Decode URL-encoded string

    if(empty($error)){//preg_match('/^[^.][-a-z0-9_.]+[a-z]$/i', $file)

        $filepath = "files/" . $file;
    
        // Process download
        if(file_exists($filepath)) {
            
            header('Content-Description: File Transfer');
            header('Content-Type: application/pdf');
            header('Content-Disposition: inline');
            header('Expires: 0');
            header('Cache-Control: must-revalidate');
            header('Pragma: public');
            header('Content-Length: ' . filesize($filepath));
            
            flush(); // Flush system output buffer
            readfile($filepath);
            die();
        } else {
            http_response_code(404);
            die();
        }
    } else {
        die("Invalid file name!");
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>My PDF Viewer</title>
</head>
<body>
    <div id="pdf-main-container">
        <div id="pdf-loader">Loading document ...</div>
        <div id="pdf-contents">
            <div id="pdf-meta">
                <div id="pdf-buttons">
                    <button id="pdf-prev">Previous</button>
                    <input id="current_page" value="1" type="number" />
                    <button id="pdf-next">Next</button>
                </div>
                <div id="zoom_controls">
                    <button id="zoom_in">+</button>
                    <button id="zoom_out">-</button>
                </div>
                <div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>
            </div>
            <div id="canvas_container">
                <canvas id="pdf-canvas" width="400"></canvas>
                <div id="page-loader">Loading page ...</div>
            </div>
        </div>
    </div>
    <script src="js/pdf.min.js"></script>
    <script src="js/pdf.worker.min.js"></script>

    <script type="text/javascript">
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }

        var _PDF_DOC, _CURRENT_PAGE, _TOTAL_PAGES, _PAGE_RENDERING_IN_PROGRESS = 0,_SCALE=1.0, _CANVAS = document.querySelector('#pdf-canvas');

        // initialize and load the PDF
        function showPDF(pdf_url,postdata) {
            document.querySelector("#pdf-loader").style.display = 'block';
            // get handle of pdf document
            try {
                $.ajax({
                    type: 'POST',
                    url: pdf_url,
                    cache: false,
                    method: "POST",
                    data: postdata,
                }).done(function(res){

                    var loadingTask = pdfjsLib.getDocument({data:res} );
                    loadingTask.promise.then(function(pdf) {

                        // total pages in pdf
                        _TOTAL_PAGES = pdf.numPages;

                        // Hide the pdf loader and show pdf container
                        document.querySelector("#pdf-loader").style.display = 'none';
                        document.querySelector("#pdf-contents").style.display = 'block';
                        document.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES;

                        // show the first page
                        showPage(pdf,1);
                    });

                    alert('FileLoaded');
                }).fail(function (res){
                    alert('File not found.')
                });

                // _PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
                // var loadingTask = pdfjsLib.getDocument(pdf_url );

            }
            catch(error) {
                alert(error.message);
            }
        }

        // load and render specific page of the PDF
        async function showPage(pdf,page_no) {
            _PAGE_RENDERING_IN_PROGRESS = 1;
            _CURRENT_PAGE = page_no;

            // disable Previous & Next buttons while page is being loaded
            document.querySelector("#pdf-next").disabled = true;
            document.querySelector("#pdf-prev").disabled = true;

            // while page is being rendered hide the canvas and show a loading message
            document.querySelector("#pdf-canvas").style.display = 'none';
            document.querySelector("#page-loader").style.display = 'block';

            // update current page
            document.querySelector("#pdf-current-page").innerHTML = page_no;

            // get handle of page
            try {

                pdf.getPage(page_no).then(function(page) {

                    var viewport = page.getViewport({ scale: _SCALE, });

                    // original width of the pdf page at scale 1
                    var pdf_original_width = page.getViewport(_SCALE).width;

                    _CANVAS.height = viewport.height;
                    _CANVAS.width = viewport.width;

                    // as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
                    var scale_required = _CANVAS.width / pdf_original_width;

                    
                    // setting page loader height for smooth experience
                    document.querySelector("#page-loader").style.height =  _CANVAS.height + 'px';
                    document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';

                    var render_context = {
                        canvasContext: _CANVAS.getContext('2d'),
                        viewport: viewport
                    };

                    // render the page contents in the canvas
                    try {
                        page.render(render_context);

                        document.querySelector("#pdf-canvas").style.display = 'block';
                        document.querySelector("#page-loader").style.display = 'none';
                    }
                    catch(error) {
                        alert(error.message);
                    }

                    _PAGE_RENDERING_IN_PROGRESS = 0;

                    // re-enable Previous & Next buttons
                    document.querySelector("#pdf-next").disabled = false;
                    document.querySelector("#pdf-prev").disabled = false;

                });
            }
            catch(error) {
                alert(error.message);
            }
        }

        showPDF('http://localhost:8080/pdfViewer.php',{file:'as.pdf',KeyCode:'abcd123456'});

    
    </script>
</body>
</html>


我的PDF查看器
正在加载文档。。。
以前的
下一个
+
-
第页，共页
正在加载页面。。。
var myState={
pdf:null，
当前页面：1，
缩放：1
}
变量(PDF)文档(DOC),(CURRENT)页面(PAGE),(TOTAL)页面(PAGE)呈现(IN)PROGRESS=0,(SCALE=1.0),(canva；
//初始化并加载PDF文件
函数showPDF（pdf_url，postdata）{
document.querySelector（“pdf加载器”）.style.display='block'；
//获取pdf文档的句柄
试一试{
$.ajax({
键入：“POST”，
网址:pdf(网址:，
cache:false，
方法：“张贴”，
数据：postdata，
}).完成（功能（res）{
var loadingTask=pdfjsLib.getDocument（{data:res}）；
loadingTask.promise.then（函数（pdf）{
//pdf格式的总页数
_总页数=pdf.numPages；
//隐藏pdf加载程序并显示pdf容器
document.querySelector（“pdf加载器”）.style.display='none'；
document.querySelector（“#pdf contents”）.style.display='block'；
document.querySelector（“#pdf total pages”）.innerHTML=_total_pages；
//显示第一页
展示页（pdf，1）；
});
警报（“文件加载”）；
}).失败（功能（res）{
警报（'未找到文件'）
});
//_PDF_DOC=wait pdfjsLib.getDocument（{url:PDF_url}）；
//var loadingTask=pdfjsLib.getDocument（pdf\u url）；
}
捕获（错误）{
警报（错误消息）；
}
}
//加载并呈现PDF的特定页面
异步函数显示页（pdf，页码）{
_页面渲染正在进行=1；
_当前页面=页码；
//加载页面时禁用上一页和下一页按钮
document.querySelector（“#pdf next”）.disabled=true；
document.querySelector（“#pdf prev”）.disabled=true；
//在呈现页面时，隐藏画布并显示加载消息
document.querySelector（“pdf画布”）.style.display='none'；
document.querySelector（“#页面加载器”）.style.display='block'；
//更新当前页面
document.querySelector（“pdf当前页”）.innerHTML=页码；
//获取页面句柄
试一试{
获取页面（第页）。然后（函数（第页）{
var viewport=page.getViewport（{scale:_scale，}）；
//比例为1的pdf页面的原始宽度
var pdf_original_width=page.getViewport（_SCALE）.width；
_CANVAS.height=viewport.height；
_CANVAS.width=viewport.width；
//由于画布的宽度固定，我们需要调整渲染页面的视口的比例
var scale_required=_CANVAS.width/pdf_original_width；
//设置页面加载器高度以获得流畅的体验
document.querySelector（“#页面加载器”）.style.height=_CANVAS.height+'px'；
document.querySelector（“#页面加载器”）.style.lineHeight=_CANVAS.height+'px'；
var render_context={
canvasContext:_CANVAS.getContext（'2d'），
视口：视口
};
//在画布中呈现页面内容
试一试{
页面渲染（渲染上下文）；
document.querySelector（“pdf画布”）.style.display='block'；
document.querySelector（“页面加载器”）.style.display='none'；
}
捕获（错误）{
警报（错误消息）；
}
_页面渲染正在进行=0；
//重新启用上一个和下一个按钮
document.querySelector（“#pdf next”）.disabled=false；
document.querySelector（“#pdf prev”）.disabled=false；
});
}
捕获（错误）{
警报（错误消息）；
}
}
showPDF（'http://localhost:8080/pdfViewer.php“，{文件：'as.pdf'，键码：'abcd123456'}）；

对于pdf文件来说，它工作得很好。但当对流源使用api时，它不起作用。我不知道我犯了什么错误