pdf-object/pdf-object.html at master · andrewillard/pdf-object · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!--
@license
Copyright (c) 2016 JamRizzi Technologies. All rights reserved.
This code may only be used under the GNU General Public License v3.0 style license
  found at http://www.gnu.org/licenses/gpl-3.0.en.html
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-button/paper-button.html">

<!--
An embeddable PDF viewer for Polymer.

Example:

    <pdf-object file="http://www.polyu.edu.hk/iaee/files/pdf-sample.pdf"></pdf-object>

Example - with card enabled and elevation set to 5:

    <pdf-object file="[[pdfUrl]]" elevation="5" card></pdf-object>

Example - with data binding and custom height:

    <pdf-object file="[[pdfUrl]]" height="800px"></pdf-object>

@demo demo/index.html
-->

<dom-module id="pdf-object">
  <template>

    <template is="dom-if" if="[[card]]">
      <paper-card heading="[[heading]]" elevation="[[elevation]]">
        <div class="card-content">
          <object data="[[file]]" type="application/pdf" width="[[width]]" height="[[height]]">
            <p>
              It appears your Web browser is not configured to display PDF files. No worries, just <a href="[[file]]">
              click here to download the PDF file.</a>
            </p>
          </object>
        </div>
        <div class="card-actions">
          <paper-button on-click="_download">[[downloadLabel]]</paper-button>
        </div>
      </paper-card>
    </template>

    <template is="dom-if" if="[[!card]]">
      <object data="[[file]]" type="application/pdf" width="[[width]]" height="[[height]]">
        <p>
          It appears your Web browser is not configured to display PDF files. No worries, just <a href="[[file]]">
          click here to download the PDF file.</a>
        </p>
      </object>
    </template>

  </template>

  <script>
    Polymer({
      is: 'pdf-object',

        properties: {
          /**
           * The location of the PDF file.
           *
           * @type String
           */
          file: {
            type: String,
            value: 'http://www.polyu.edu.hk/iaee/files/pdf-sample.pdf'
          },
          /**
           * The height of the PDF viewer.
           *
           * @type String
           */
          height: {
            type: String,
            value: '400px'
          },
          /**
           * The width of the PDF viewer.
           *
           * @type String
           */
          width: {
            type: String,
            value: '100%'
          },
          /**
           * PDF viewer as a card with download button.
           *
           * @type Boolean
           */
          card: {
            type: Boolean,
            value: false
          },
          /**
           * Download button label.
           *
           * @type String
           */
          downloadLabel: {
            type: String,
            value: 'Download'
          },
          /**
           * The z-depth of the card, from 0-5.
           *
           * @type String
           */
          elevation: {
            type: String,
            value: '1'
          }
        },

        /**
         * Downloads the pdf file
         */
        _download: function() {
          window.location = this.file;
        }
    });
  </script>
</dom-module>