feat: default settings prop

README.md

@@ -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,37 +63,27 @@ 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     |
-
+| settings       | `{ defaultZoom: number }` | -                                                                                                               | default settings   |
-
-
-
-  
 
 ### Events
 
-  
 | Name             | Value                                 | Description                     |
 | ---------------- | ------------------------------------- | ------------------------------- |
 | download         | `{source: string; filename: string;}` | pdf file base info              |
@@ -125,20 +92,12 @@ export default {
 | 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.

src/PDFViewer.vue

@@ -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 [
+        return controls
-          'download',
-          'print',
-          'double', // TODO
-          'fullscreen', // TODO
-          'abort', // TODO
-          'fullpage', // TODO
-          'rotate',
-          'zoom',
-          'catalog',
-          'switchPage',
-        ]
       },
     },
     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', {

src/components/Viewer/Viewer.vue

@@ -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) {

src/constants/controls.js

@@ -12,10 +12,10 @@ export const SWITCH_PAGE = 'switchPage'
 export default [
   DOWNLOAD,
   PRINT,
-  DOUBLE,
+  DOUBLE, // TODO
-  FULLSCREEN,
+  FULLSCREEN, // TODO
-  ABOUT,
+  ABOUT, // TODO
-  FULLPAGE,
+  FULLPAGE, // TODO
   ROTATE,
   ZOOM,
   CATALOG,