总结pdf放到页面上预览用法

最新推荐文章于 2023-07-18 10:37:19 发布

爱笑的念安

最新推荐文章于 2023-07-18 10:37:19 发布

阅读量1.4k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_41774574/article/details/80018221

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

PDF.JS的链接

链接：https://pan.baidu.com/s/1HlwqzzDKLe2Uu_a6sJeyCg

密码：vyms

------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
       <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <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);
        }
        .pop{
            position: absolute;
            left: 50%;
            width: 894px;
            margin-left: -447px;
            z-index: 9;
        }
    </style>

<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>芳华图书馆</title>
</head>
<body>
<form action="/syslogin/to_login.do" method="post">
<input type="submit" value="aa">
  <h1><a href="javascript:void(0)" target="_blank" οnclick="showPdf()">显示pdf文档</a></h1>
  <!--   <div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
        
        </div>
    </div> -->

</form>
	<!-- pdf.js的项目路径 -->
 <script type="text/javascript" src="/static/pdf/build/pdf.js" ></script>
 <!-- 配置pdf的路径，也可以在下面showPdf配置 -->
 <script type="text/javascript" src="/static/pdf/build/pdf.worker.js" ></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
        function showPdf() {
            var container = document.getElementById("container");
            //pdf在项目里面的相对路径
            var url = '/uploadFiles/uploadDoc/test8.pdf';
            PDFJS.workerSrc = '/static/pdf/build/pdf.worker.js';
            PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
            	//for循环渲染每一页，要从1开始
            	 for (var i = 1; i < pdf.numPages; i++) {
                pdf.getPage(i).then(function getPageHelloWorld(page) {
                    var scale = 1.5;
                    var viewport = page.getViewport(scale);
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    //这里存放到body下可以自行修改到要放的div里面
                    document.body.appendChild(canvas);
                     var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };  
                    page.render(renderContext);
                });
            }
            });
        }
    </script>


</body>
</html>

----------------------------------------