我正在研究链接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。