Pdf.js Polymer元素未正确显示

时间:2015-08-23 11:59:54

标签: polymer-1.0 pdf.js

我正在研究链接https://github.com/PolymerLabs/pdf-js上找到的pdf.js聚合物组件。目标是在我正在处理的网站上的Polymer组件中显示PDF。 我更新了here找到的组件!到Polymer 1.0。它没有正确显示。我究竟做错了什么? 这是代码:

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<script src="pdfjs/pdf.min.js"></script>
<script type="text/javascript">
    PDFJS.disableWorker = true;
</script>
<dom-module id="cluster-reader-2" attributes="src scale page">
    <style>
        :host {
            background-color: #444;
            padding: 2px;
            border: 1px solid black;
        }
        #pdfLabel {
            color: white;
            padding: 4px;
            font-weight: bold;
        }
    </style>
        <template>
            <span id="pdfLabel">{{label}}</span><button on-click="{{prev}}">Prev</button><button on-click="{{next}}">Next</button>
            <br/>
            <canvas id="pdfCanvas" style="border:1px solid gray; background-color: white;"/>
        </template>R
    <script>
(function() {
        Polymer({
          is: 'cluster-reader-2',

          properties: {
              scale: {
                  type: Number,
                  value: 2.5
              },
              page: {
                  type: Number,
                  value: 1
              },
              src: {
                  type: String,
                  value: ''
              },
              label: {
                  type: String,
                  value: ''
              },
              prev: function() {
                  if (this.page > 0) {
                      this.page--;
                  }
              },
              next: function() {
                  this.page++;
              },

              ...

              render: function() {
                  if (!this.pdf) {
                      return;
                  }
                  var canvas = this.$.pdfCanvas;
                  var scale = this.scale;
                  // Using promise to fetch the page
                  this.pdf.getPage(this.page).then(function(page) {
                      var viewport = page.getViewport(scale);
                      //
                      // Prepare canvas using PDF page dimensions
                      //
                      var context = canvas.getContext('2d');
                      canvas.height = viewport.height;
                      canvas.width = viewport.width;
                      //
                      // Render PDF page into canvas context
                      //
                      var renderContext = {
                          canvasContext: context,
                          viewport: viewport
                      };
                      page.render(renderContext);
                  });
              }
          }
        });
        })();
    </script>
</dom-module>

在index.html文件的正文中调用,如:

<cluster-reader-2 src="app/example/helloworld.pdf"></cluster-reader-2>

如下图所示,不显示PDF。

enter image description here

0 个答案:

没有答案