feat: viewer logic changes

demo/App.vue

@@ -15,9 +15,9 @@
 import PDFViewer from '../src/index.js'
 
 const TEST_URL_MAP = {
-  test1: '/demo/static/pdf/helloworld.pdf',
+  test1: 'https://raw.githubusercontent.com/DingRui12138/vue-pdf-viewer/master/demo/static/pdf/helloworld.pdf',
   test2:
-    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf',
+    '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
 }
 
@@ -27,7 +27,7 @@ export default {
   },
   data() {
     return {
-      pdfSource: TEST_URL_MAP.test1,
+      pdfSource: TEST_URL_MAP.test2,
     }
   },
   methods: {

src/PDFViewer.vue

@@ -20,7 +20,7 @@
     <div class="pdf-viewer__body">
       <div class="loading-mask" v-if="isLoading">
         <slot name="loading">
-          <div class="loading-content">Loading...</div>
+          <div class="loading-content">Loading {{dotText}}</div>
         </slot>
       </div>
       <Viewer
@@ -42,8 +42,6 @@
         @rendered="handleDocumentRender"
       />
     </div>
-
-    <iframe ref="iframe" style="display: none" />
   </div>
 </template>
 
@@ -92,9 +90,16 @@ export default {
       rotate: 0,
       isFullpage: false,
       filename: '',
+      seconds: 0,
     }
   },
   computed: {
+    dotText() {
+      const len = this.seconds % 3 + 1
+      const dot = '.'
+
+      return dot.repeat(len)
+    },
     viewerStyle() {
       return {
         visibility: this.isLoading ? 'hidden' : 'visible',
@@ -136,6 +141,15 @@ export default {
     },
     handleUpdateLoadingState(isLoading) {
       this.isLoading = isLoading
+      
+      if (this.$slots.loading) return
+      this._timer && clearInterval(this._timer)
+      if (isLoading) {
+        this.seconds = 0
+        this._timer = setInterval(() => {
+          this.seconds += 1
+        }, 500)
+      }
     },
     handlePasswordRequest({ callback, retry }) {
       // TODO: slot dialog ?

src/components/IFrame/IFrame.vue

@@ -8,7 +8,7 @@ export default {
   },
   render(h) {
     return h('iframe', {
-      on: { load: this.renderChildren },
+      on: { load: this.handleRenderChildren },
       style: { width: '100%', height: '100%', border: 'none' },
     })
   },
@@ -21,12 +21,36 @@ export default {
     getContentWindow() {
       return this.$el.contentWindow
     },
+    appendHead() {
+      const metaList = [
+        {
+          'http-equiv': 'content-type',
+          content: 'text/html; charset=UTF-8',
+        },
+        {
+          name: 'referrer',
+          content: 'no-referrer-when-downgrade',
+        },
+      ]
+
+      metaList.forEach(meta => {
+        const metaEl = document.createElement('META')
+
+        Object.keys(meta).forEach(k => {
+          metaEl[k] = meta[k]
+        })
+
+        this.$el.contentDocument.head.appendChild(metaEl)
+      })
+    },
     appendStyle(style) {
       const cssEl = document.createElement('STYLE')
       cssEl.textContent = style
+
       this.$el.contentDocument.head.appendChild(cssEl)
     },
-    renderChildren() {
+    handleRenderChildren() {
+      this.appendHead()
       // inject iframe styles
       this.appendStyle(style)
       if (this.css) {

src/components/Viewer/Viewer.vue

@@ -83,7 +83,7 @@ export default {
   },
   data() {
     return {
-      document: null,
+      pdf: null,
       viewerContentHeight: 0,
       viewportHeight: 0,
       viewportWidth: 0,
@@ -213,10 +213,10 @@ export default {
       })
     },
     startLoading() {
-      this.$emit('isLoading', true)
+      this.$emit('update:isLoading', true)
     },
     endLoading() {
-      this.$emit('isLoading', false)
+      this.$emit('update:isLoading', false)
     },
     handleSwitchPage(page) {
       this.$emit('update:page', page)
@@ -231,6 +231,11 @@ export default {
         this.$emit('update:filename', filename)
 
         const documentLoadingTask = PDF.getDocument(this.source)
+        // const documentLoadingTask = PDF.getDocument({
+        //   url: this.source,
+        //   cMapPacked: true,
+        //   cMapUrl: 'https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/',
+        // })
         documentLoadingTask.onPassword = (callback, reason) => {
           const retry = reason === PDF.PasswordResponses.INCORRECT_PASSWORD
           this.$emit('password-requested', {
@@ -238,20 +243,20 @@ export default {
             retry,
           })
         }
-        this.document = await documentLoadingTask.promise
+        this.pdf = await documentLoadingTask.promise
 
         this.$emit('loaded', {
-          total: this.document.numPages,
+          total: this.pdf.numPages,
         })
       } catch (e) {
-        this.document = null
+        this.pdf = null
         this.$emit('loading-failed', e)
       } finally {
         this.endLoading()
       }
     },
     async render() {
-      if (!this.document) {
+      if (!this.pdf) {
         return
       }
       try {
@@ -259,7 +264,7 @@ export default {
 
         await Promise.all(
           this.pages.map(async (pageNum, i) => {
-            const page = await this.document.getPage(pageNum)
+            const page = await this.pdf.getPage(pageNum)
             const pageWidth = page.view[2]
             const containerWidth = this.$el.clientWidth
             const targetWidth = containerWidth * 0.9
@@ -300,7 +305,7 @@ export default {
         await this.$nextTick()
         this.viewerContentHeight = this.$refs.viewerContent.clientHeight
       } catch (e) {
-        this.document = null
+        this.pdf = null
         this.$emit('rendering-failed', e)
       }
     },