pdf在线浏览器pdf viewer

最新推荐文章于 2024-07-26 03:26:04 发布

空中湖

最新推荐文章于 2024-07-26 03:26:04 发布

阅读量2.9k

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/kongzhonghu/article/details/127230025

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

有的时候为了pdf保密的需求需要将pdf转换为图片的形式在网页上展示出来，所以经常需要这样的pdf页面浏览器，这里发现了一个可以将pdf文件实时的转换为图片并在网页端展示的项目，其中只需要用到前端js和html文件既可以实现pdf文件的在线预览，实时展示。用户只能看到高清图片，

无法复制保存具体的内容。

具体效果图下

在线demo地址

index.html

<!DOCTYPE html>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>Bootstrap PDF Viewer</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="cleartype" content="on">

    <!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="">
    
    <!-- Twitter Bootstrap -->
    <link rel="stylesheet" href="lib/twitter-bootstrap/css/bootstrap.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">

    <!-- Bootstrap PDF Viewer -->
    <link rel="stylesheet" href="css/bootstrap-pdf-viewer.css">
  </head>
  <body>

    <!-- Bootstrap PDF Viewer -->
    <div id="viewer" class="pdf-viewer" data-url="sample.pdf"></div>

    <!-- jQuery -->
    <script src="lib/jquery-1.9.1.js"></script>

    <!-- Twitter Bootstrap -->
    <script src="lib/twitter-bootstrap/js/bootstrap.js"></script>

    <!-- Bootstrap PDF Viewer -->
    <script src="lib/pdf.js"></script>
    <script src="js/bootstrap-pdf-viewer.js"></script>

    <script>
      var viewer;

      $(function() {
        viewer = new PDFViewer($('#viewer'));
      });
    </script>
  </body>
</html>