feat: default settings prop

2022-01-27 11:41:36 +08:00
1 parent 79b598315f
commit 93625e201e
@@ -1,58 +1,36 @@
 # 📄 pdf-viewer-vue

-  
-
 PDF viewer component for Vue 2 and Vue 3

 [![npm](https://img.shields.io/npm/v/pdf-viewer-vue)](https://npmjs.com/package/pdf-viewer-vue) [![npm](https://img.shields.io/npm/dw/pdf-viewer-vue)](https://npmjs.com/package/pdf-viewer-vue) [![Github Repo stars](https://img.shields.io/github/stars/DingRui12138/vue-pdf-viewer)](https://github.com/DingRui12138/vue-pdf-viewer) [![npm](https://img.shields.io/npm/l/pdf-viewer-vue)](https://github.com/DingRui12138/vue-pdf-viewer/blob/master/LICENSE)

-
 ## Compatibility

-  
-
 This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but `dist` directory also contains a build for Vue 2 (`dist/vue2-pdf-viewer.js`). See the example in [Usage](#usage) section.

-  
-
 ## Installation

-  
-
 Depending on the environment, the package can be installed in one of the following ways:

-  
-
 ```shell

 npm install pdf-viewer-vue

 ```

-  
-
 ```shell

 yarn add pdf-viewer-vue

 ```

-  
-
 ```html
-
 <script src="https://unpkg.com/pdf-viewer-vue"></script>
-
 ```

-  
-
 ## Usage

-  
-
 ```vue
-
 <template>
  <div>
    <h1>File</h1>
@@ -71,7 +49,6 @@ yarn add pdf-viewer-vue
      @download="handleDownload"
    />
  </div>
-
 </template>

 <script>
@@ -86,59 +63,41 @@ export default {
  },

  data() {
-
    return {
      url: '<PDF_URL>',
      base64: '<BASE64_ENCODED_PDF>',
    }
  },
 }
-
 </script>
-
 ```

-  
-
 ### Props

-  | Name           | Type       | Accepted values                                                                                                 | Description        |
-  | -------------- | ---------- | --------------------------------------------------------------------------------------------------------------- | ------------------ |
-  | source         | `string`   | document `URL` or `Base64`                                                                                      | source of document |
-  | controls       | `string[]` | `[`<br/>`'download',`<br/>`'print',`<br/>`'rotate',`<br/>`'zoom',`<br/>`'catalog',`<br/>`'switchPage',`<br/>`]` | visible controls   |
-  | loading-text   | `string`   | -                                                                                                               | loading text       |
-  | rendering-text | `string`   | -                                                                                                               | rendering text     | 
-
-
-
-
-  
+| Name           | Type                      | Accepted values                                                                                                 | Description        |
+| -------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------ |
+| source         | `string`                  | document `URL` or `Base64`                                                                                      | source of document |
+| controls       | `string[]`                | `[`<br/>`'download',`<br/>`'print',`<br/>`'rotate',`<br/>`'zoom',`<br/>`'catalog',`<br/>`'switchPage',`<br/>`]` | visible controls   |
+| loading-text   | `string`                  | -                                                                                                               | loading text       |
+| rendering-text | `string`                  | -                                                                                                               | rendering text     |
+| settings       | `{ defaultZoom: number }` | -                                                                                                               | default settings   |

 ### Events

-  
-  | Name             | Value                                 | Description                     |
-  | ---------------- | ------------------------------------- | ------------------------------- |
-  | download         | `{source: string; filename: string;}` | pdf file base info              |
-  | loaded           | `{total: number}`                     | document load completed      |
-  | loading-failed   | `Error`                               | failed to load document         |
-  | rendered         | -                                     | finished rendering the document |
-  | rendering-failed | `Error`                               | failed to render document       |
-
-
-  
+| Name             | Value                                 | Description                     |
+| ---------------- | ------------------------------------- | ------------------------------- |
+| download         | `{source: string; filename: string;}` | pdf file base info              |
+| loaded           | `{total: number}`                     | document load completed         |
+| loading-failed   | `Error`                               | failed to load document         |
+| rendered         | -                                     | finished rendering the document |
+| rendering-failed | `Error`                               | failed to render document       |

 ## Examples

-  
 ```
 TODO: CodeSandbox or JSFiddle
 ```

-  
-
 ## License

-  
-
-MIT License. Please see [LICENSE file](LICENSE) for more information.
+MIT License. Please see [LICENSE file](LICENSE) for more information.
@@ -8,7 +8,11 @@
      <button @click="handleSwitchUrl('base64')">switch base64</button>
    </div>
    <div style="height: calc(100vh - 30px); width: 80%; margin: 0 auto">
-      <PDFViewer :source="pdfSource" @download="handleDownload" />
+      <PDFViewer
+        :source="pdfSource"
+        @download="handleDownload"
+        :settings="{ defaultZoom: 200 }"
+      />
    </div>
  </div>
 </template>
@@ -17,8 +21,7 @@
 import PDFViewer from '../src/index.js'

 const TEST_URL_MAP = {
-  test1:
-    'http://localhost:55703/1.pdf',
+  test1: 'http://localhost:55703/1.pdf',
  test2:
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
  base64: `data:application/octet-stream;base64,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 truncated
@@ -30,7 +33,7 @@ export default {
  },
  data() {
    return {
-      pdfSource: TEST_URL_MAP.test1,
+      pdfSource: TEST_URL_MAP.test2,
    }
  },
  methods: {
@@ -60,6 +60,7 @@
 </template>

 <script>
+import controls, { CATALOG } from './constants/controls'
 import './assets/iconfont/iconfont.css'
 import Viewer from './components/Viewer/Viewer.vue'
 import ViewerPageSelector from './components/ViewerPageSelector.vue'
@@ -74,18 +75,7 @@ export default {
    controls: {
      type: Array,
      default: () => {
-        return [
-          'download',
-          'print',
-          'double', // TODO
-          'fullscreen', // TODO
-          'abort', // TODO
-          'fullpage', // TODO
-          'rotate',
-          'zoom',
-          'catalog',
-          'switchPage',
-        ]
+        return controls
      },
    },
    loadingText: {
@@ -96,6 +86,10 @@ export default {
      type: String,
      default: 'Rendering',
    },
+    settings: {
+      type: Object,
+      default: () => ({}),
+    },
  },
  components: {
    Viewer,
@@ -164,6 +158,10 @@ export default {
    },
    deep: true,
  },
+  mounted() {
+    this.zoom = this.settings.defaultZoom || 100
+    this.catalogVisible = this.controls.includes(CATALOG)
+  },
  methods: {
    handleDownload() {
      this.$emit('download', {
@@ -137,7 +137,7 @@ export default {
    viewerStyle() {
      return {
        // height: `${this.zoom / NORMAL_RATIO}%`,
-        width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth}px`,
+        width: `${(this.zoom / NORMAL_RATIO / 100) * this.viewportWidth - 40}px`,
        transform: `rotate(${this.rotate}deg)`,
      }
    },
@@ -159,6 +159,9 @@ export default {
          }
        : {}
    },
+    verticalPadding() {
+      return (this.viewportWidth / this.viewportHeight) * 0
+    },
  },
  watch: {
    isFullpage(n, o) {
@@ -185,6 +188,16 @@ export default {
        this.render()
      },
    },
+    catalogVisible(n, o) {
+      if (n !== o) {
+        this.viewportWidth = n ? this.viewportWidth - 300 : this.viewportWidth + 300
+      }
+      // setTimeout(() => {
+      //   this.$nextTick(() => {
+      //     this.handleResize()
+      //   })
+      // }, 500)
+    },
  },
  activated() {
    this.$nextTick(() => {
@@ -214,7 +227,8 @@ export default {
      contentWindow.print()
    },
    updateZoomFullpage() {
-      const perViewerHeight = this.viewerContentHeight / this.total
+      const perViewerHeight =
+        (this.viewerContentHeight - this.verticalPadding) / this.total
      const rate = this.viewportHeight / (perViewerHeight - MARGIN_OFFSET)

      this.$emit('update:zoom', this.zoom * rate)
@@ -223,7 +237,9 @@ export default {
    handleViewerScroll(evt) {
      this.isScrolling = true
      const yOffset = evt.target.scrollTop
-      const perHeight = (this.viewerContentHeight + MARGIN_OFFSET) / this.total
+      const perHeight =
+        (this.viewerContentHeight + MARGIN_OFFSET - this.verticalPadding) /
+        this.total
      const halfViewportOffset = (perHeight - this.viewportHeight) / 2

      const currentPosition = (yOffset - halfViewportOffset) / perHeight + 1
@@ -299,6 +315,9 @@ export default {
          const image = document.createElement('img')
          image.className = 'placeholder'
          image.src = URL.createObjectURL(blobData.blob)
+          image.onload = e => {
+            e.target.naturalWidth
+          }

          return image
        }
@@ -334,6 +353,10 @@ export default {
        this.$emit('rendered')
        this.$emit('update:isRendering', false)

+        if (this.settings?.isFullWidth) {
+          this.$emit('update:zoom', 200)
+        }
+
        await this.$nextTick()
        this.viewerContentHeight = this.$refs.viewerContent.clientHeight
      } catch (e) {
@@ -12,10 +12,10 @@ export const SWITCH_PAGE = 'switchPage'
 export default [
  DOWNLOAD,
  PRINT,
-  DOUBLE,
-  FULLSCREEN,
-  ABOUT,
-  FULLPAGE,
+  DOUBLE, // TODO
+  FULLSCREEN, // TODO
+  ABOUT, // TODO
+  FULLPAGE, // TODO
  ROTATE,
  ZOOM,
  CATALOG,