📌  相关文章
📜  无需使用 codeigniter 下载即可在线查看 pdf 文件 (1)

📅  最后修改于: 2023-12-03 14:55:08.754000             🧑  作者: Mango

在线查看PDF文件--无需使用CodeIgniter

PDF文件是目前常用的文档格式之一，而大多数情况下需要下载之后才能查看。然而，随着技术的不断更新，我们有更多的在线查看PDF文件的选择。在本文中，我将介绍一种无需使用CodeIgniter的方式，在线查看PDF文件。

WebViewer

WebViewer是一个基于JavaScript的PDF查看器，可以很好地嵌入到网站中，在不需要下载PDF文件的情况下，实现在线查看PDF文档。WebViewer使用的是PDF.js，这是Mozilla开发的一个开源项目，旨在在现代浏览器中以JavaScript方式显示PDF文件。

集成WebViewer
步骤1：下载WebViewer包

访问WebViewer网站，下载需要的WebViewer包。WebViewer提供了许多版本，包括开源版、商业版等。在本文中，我们将使用开源版的WebViewer。

步骤2：准备HTML文件

在WebViewer包中，有一个名为WebViewer.html的示例文件。将该文件拷贝到自己的项目中，并修改各参数，以满足自己的需求。以下是WebViewer.html的相关参数。

<body>
  <script src="lib/jquery-1.10.2.min.js"></script>
  <script src="lib/promise.min.js"></script>
  <script src="lib/pdfjs-dist/build/pdf.js"></script>

  <script src="lib/webviewer.min.js"></script>

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    #viewer {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>

  <div id="viewer"></div>

  <script>
    var viewerElement = document.getElementById('viewer');
    var viewer = new PDFTron.WebViewer({
      path: 'lib',
      type: 'html5',
      documentType: 'pdf',
      initialDoc: 'path/to/your/pdf/file',
      fullAPI: true,
      enableMeasurement: true,
      enableAnnotations: true,
      // ...
    }, viewerElement);
  </script>
</body>

其中，一些值需要被修改以适应你的环境：

  • path: WebViewer嵌入的静态资源所在的位置；
  • initialDoc: 初始的PDF文件路径；
  • enableMeasurement: 是否允许对PDF文件进行测量操作；
  • enableAnnotations: 是否允许对PDF文件进行注释操作。
步骤3：运行WebViewer.html

在浏览器中打开修改后的WebViewer.html文件，即可在线查看PDF文件，无需下载。

结论

通过使用开源的WebViewer及基于JavaScript的PDF.js，可以方便地在网页中嵌入PDF查看器，且无需先下载PDF文件。在此过程中并不需要使用CodeIgniter框架，因此无需安装和额外配置。