【问题标题】:Use PDF.js based PDF preview viewer to CakePHP 2.x使用基于 PDF.js 的 PDF 预览查看器到 CakePHP 2.x
【发布时间】:2015-12-28 07:20:25
【问题描述】:

我对 cakephp 有点陌生,我正在尝试使用我在网上找到的这个非常好的 PDF 预览https://gist.github.com/ichord/9808444

<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script><html>
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/pdfjs-helloworld-v2/8598/edit
-->
<body>
  <canvas id="the-canvas" style="border:1px solid black"></canvas>
  <input id='pdf' type='file'/>

  <!-- Use latest PDF.js build from Github -->
  <script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
  
  <script type="text/javascript">
    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and dynamically loading a cross-origin script does
    // not work)
    //
    PDFJS.disableWorker = true;
    //
    // Asynchronous download PDF as an ArrayBuffer
    //
    var pdf = document.getElementById('pdf');
    pdf.onchange = function(ev) {
      if (file = document.getElementById('pdf').files[0]) {
        fileReader = new FileReader();
        fileReader.onload = function(ev) {
          console.log(ev);
          PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
            //
            // Fetch the first page
            //
            console.log(pdf)
            pdf.getPage(1).then(function getPageHelloWorld(page) {
              var scale = 0.8;
              var viewport = page.getViewport(scale);
              //
              // Prepare canvas using PDF page dimensions
              //
              var canvas = document.getElementById('the-canvas');
              var context = canvas.getContext('2d');
              canvas.height = viewport.height;
              canvas.width = viewport.width;
              //
              // Render PDF page into canvas context
              //
              var task = page.render({canvasContext: context, viewport: viewport})
              task.promise.then(function(){
                console.log(canvas.toDataURL('image/jpeg'));
              });
            });
          }, function(error){
            console.log(error);
          });
        };
        fileReader.readAsArrayBuffer(file);
      }
    }
            alert(file.name)
  </script>
  

<style id="jsbin-css">
</style>
<script>
</script>
</body>
</html>​

但我无法使用 cakephp。

它可以在 cakephp 环境之外的服务器上运行,我想我必须将它用作插件,但我无法弄清楚。它使用 pdf.js 和 processing-api.js 库,我认为问题在于加载这些库。

我想要的是用户在上传之前预览他想要上传的 pdf

提前谢谢你。

问候

【问题讨论】:

  • 似乎问题出在重定向上,当我调试时,我看到 pdf.js 发送此错误:预期表达式,得到 ' 就像试图读取 index.php因为 cakephp 将它重定向到该文件......这发生在这里 PDFJS.getDocument(fileReader.result)

标签: javascript jquery cakephp pdf pdfjs


【解决方案1】:

我终于找到了解决方案,我补充说: PDFJS.workerSrc = '/js/pdf.worker.js'; 之前 PDFJS.disableWorker = true;

现在可以了!

【讨论】:

    猜你喜欢
    • 2014-11-07
    • 2010-10-07
    • 2014-07-31
    • 2014-06-16
    • 2016-06-29
    • 2011-04-18
    • 2019-08-09
    相关资源
    最近更新 更多