@toolspack/ttd-pdfjs 0.1.3 → 0.1.5

package/src/packages/pdfjs/{PdfView216.vue → PdfView.vue}

@@ -1,415 +1,421 @@
-<template>
-  <div class="pdf-view" :style="style">
-    <div class="pdf-view-control" v-if="showPages">
-      <switch-page ref="switchPage" :scale='compuscale' :numPages="page_count"
-      :page="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
-       @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
-    </div>
-    <div class="pdf-view-area-wapper">
-      <div>
-        <div
-          class="center pdf-view-area"
-          @drop="onDrop"
-          @dragover="onDragOver"
-          :key="pdfurl"
-          :style="{'border': border?'1px solid #666': ''}"
-          v-if="pdfurl"
-        >
-          <div v-if="fileLoading"  class="pdf-view-loading">文件加载中...</div>
-          <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div>
-          <canvas :key="pdfurl +'canvas'" class="canvasstyle" ref="canvas"></canvas>
-          <div class="label-area">
-            <slot></slot>
-          </div>
-        </div>
-        <div v-else class="pdf-view-empty">未找到资源，请联系管理员!</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-import { Message } from 'element-ui';
-import SwitchPage from './SwitchPage.vue'
-
-function getChromeVersion() {
-  const arr = navigator.userAgent.split(' ');
-  let chromeVersion = '';
-  for (let i = 0; i < arr.length; i++) {
-    if (/chrome/i.test(arr[i])) chromeVersion = arr[i]
-  }
-  if (chromeVersion) {
-    return Number(chromeVersion.split('/')[1].split('.')[0]);
-  }
-  return false;
-}
-let version = ''
-if (getChromeVersion()) {
-  version = getChromeVersion();
-  if (version < 98) {
-    Message({
-      message: `您使用的谷歌浏览器版本过低【version:${version}】，为了更好地体验请将浏览器升级到最新版本！`,
-      type: 'error',
-      duration: 1800,
-    })
-  }
-}
-
-// const PDFJS = require('pdfjs-dist/legacy/build/pdf.js')
-const PDFJS = require('pdfjs-dist')
-
-const defautScale = 1.0
-// PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.min.js')
-PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
-// https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
-// const cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/'
-// 使用代理的cmaps，会导致加载很慢，改用本地
-
-const cMapUrl = 'https://wsp.totodi.com/staticfiles_web/web/pdfjs/cmaps/'
-
-export const maxscale = 3
-export const minscale = 0.2
-
-export default {
-  components: { SwitchPage },
-  props: {
-    pdfurl: {
-      default: '',
-    },
-    scale: {
-      type: Number,
-      default: defautScale,
-    },
-    showPages: {
-      type: [String, Number, Boolean],
-      default: true,
-    },
-    zoomEnable: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    rotateEnable: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    border: {
-      type: [String, Number, Boolean],
-      default: true,
-    },
-    marginAuto: {
-      type: [String, Number, Boolean],
-      default: false,
-    },
-    page: {
-      type: [String, Number],
-      default: 1,
-    },
-    showWidth: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      pdfDoc: null, // pdfjs 生成的对象
-      viewport: null,
-      pageNum: 1, // 当前页数
-      pageRendering: false,
-      fileLoading: true,
-      pageNumPending: null,
-      compuscale: defautScale, // 放大倍数
-      compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
-      page_count: 0, // 总页数
-      maxscale, // 最大放大倍数
-      minscale, // 最小放大倍数
-      isready: false,
-      initPage: true, // 初始化页面
-      style: {
-        width: '860px', // 先给个默认值，当渲染后，后自动按实际值渲染，否则打标签那里，会显示异常
-        margin: this.marginAuto === '' || this.marginAuto ? '0 auto' : '0',
-      },
-    }
-  },
-  methods: {
-    async renderPage(num) {
-      console.log('renderPage ', this.pageRendering)
-      if (this.pageRendering) {
-        this.pageNumPending = num;
-      } else {
-      // 渲染pdf
-        const vm = this
-        this.pageRendering = true
-        // Using promise to fetch the page
-        if (!this.pdfDoc) {
-          return false
-        }
-        try {
-          const page = await this.pdfDoc.getPage(num)
-          let scaleNum = vm.compuscale
-          let viewport = ''
-          const viewboxWidth = this.showWidth
-          if (this.initPage) {
-            viewport = page.getViewport({ scale: 1.0 })
-            if (viewboxWidth) {
-              const desiredWidth = parseInt(viewboxWidth, 10) - 2
-              // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
-              scaleNum = desiredWidth / viewport.width
-              this.compuscale = scaleNum
-              this.maxscale = scaleNum
-            }
-            // console.log('xxxxxx', this.compuRotate, viewport.rotation)
-            this.compuRotate = viewport.rotation
-            this.initPage = false
-          }
-          // 重新渲染 缩放过的PDF
-          viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
-          this.viewport = viewport
-
-          // 将 canvas 尺寸 传给父组件
-          this.$emit('size', viewport, num)
-
-          // Render PDF page into canvas context
-          vm.isready = true
-
-          const { canvas } = vm.$refs
-
-          this.style.width = `${viewport.width + 2}px`;
-          canvas.height = viewport.height
-          canvas.width = viewport.width
-
-          const renderContext = {
-            canvasContext: canvas.getContext('2d'),
-            viewport,
-          }
-          // Wait for rendering to finish
-          await page.render(renderContext).promise
-          // console.log(' await page.render 168')
-          vm.pageRendering = false
-          if (vm.pageNumPending !== null) {
-          // New page rendering is pending
-            vm.renderPage(vm.pageNumPending)
-            vm.pageNumPending = null
-          }
-          this.$emit('renderSuccess')
-        } catch (error) {
-          console.error(error)
-        } finally {
-          // console.log('finally 178')
-          this.pageRendering = false
-        }
-      }
-    },
-    prev() {
-      // 上一页
-      if (this.pageNum <= 1) {
-        return
-      }
-      this.pageNum--
-      this.queueRenderPage(this.pageNum)
-    },
-    next() {
-      // 下一页
-      if (this.pageNum >= this.page_count) {
-        return
-      }
-      this.pageNum++
-      this.queueRenderPage(this.pageNum)
-    },
-    onChangePage(page) {
-      this.emitPage(page)
-      // switch page  改变页码
-      this.queueRenderPage(page)
-    },
-    emitPage(page) {
-      this.$emit('pageChange', page, this.page_count, page === this.page_count)
-    },
-    closepdf() {
-      // 关闭PDF
-      if (this.pdfDoc) {
-        if (this.viewport) {
-          const { canvas } = this.$refs
-          if (canvas) {
-            const cxt = canvas.getContext('2d')
-            cxt.clearRect(0, 0, this.viewport.width, this.viewport.height);
-          }
-        }
-        this.viewport = null
-        this.pdfDoc.destroy();
-        // console.log('closepdf end')
-      }
-      // this.pdfDoc = null
-      this.isready = false
-      this.compuscale = this.scale
-      this.$emit('closepdf')
-    },
-    queueRenderPage(num) {
-      // console.log('queueRenderPage 226', this.pageRendering)
-      if (this.pageRendering) {
-        this.pageNumPending = num
-      } else {
-        this.renderPage(num)
-      }
-    },
-    async loadUrl(url) {
-      if (!PDFJS) {
-        return false
-      }
-      this.fileLoading = true
-      //  此处无法确定，到底是否使用encodeURI
-      // var reg = /[\u4e00-\u9fa5]+/
-      // if (reg.test(url)) {
-      //   url = encodeURI(url)
-      //   console.log('-----encodeURI------', url)
-      // }
-      console.log('----PdfView---', url)
-      if (this.pdfDoc) {
-        // console.log('pdfDocument is ready  destroy,,')
-        this.pdfDoc.destroy();
-      }
-      let pdfDoc_
-      try {
-        pdfDoc_ = await PDFJS.getDocument({
-          url: encodeURI(url),
-          cMapUrl,
-          cMapPacked: true,
-        }).promise
-      } catch (error) {
-        console.error(error)
-
-        const pdfData = await fetch(
-          new URL(url, window.location).href,
-        );
-        const arrayBufferPdf = await pdfData.arrayBuffer(); // 转成 ArrayBuffer 塞给 pdf.js
-        pdfDoc_ = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
-      } finally {
-        this.fileLoading = false
-      }
-      // console.log('pdfDoc_', pdfDoc_)
-      // debugger
-      this.pdfDoc = pdfDoc_
-      // 初始化pdf
-      this.page_count = pdfDoc_.numPages
-      this.$emit('numPages', pdfDoc_.numPages)
-      // console.log('265', this.pageRendering)
-      this.renderPage(this.pageNum)
-      this.emitPage(this.pageNum)
-    },
-    onDrop(event) {
-      this.$emit('drop', event)
-    },
-    onDragOver(event) {
-      // 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
-      // 这要通过调用 ondragover 事件的 event.preventDefault() 方法：
-      event.preventDefault()
-    },
-    updateScale() {
-      this.compuscale = this.scale
-      // console.log('updateScale 278')
-      this.renderPage(this.pageNum)
-    },
-    onScale(scale) {
-      this.compuscale = scale
-      this.renderPage(this.pageNum)
-    },
-    onRotate(rotate) {
-      this.compuRotate += rotate
-      this.renderPage(this.pageNum)
-    },
-  },
-  mounted() {
-  },
-  beforeDestroy() {
-    // console.log('---', this.pdfDoc)
-    if (this.pdfDoc) {
-      this.closepdf();
-    }
-  },
-  watch: {
-    scale: {
-      handler(val) {
-        if (val) {
-          this.compuscale = val
-        }
-      },
-      immediate: true,
-    },
-    pdfurl: {
-      handler(val) {
-        // console.log('watch url change: ', val)
-        if (this.pdfDoc) {
-          // console.log('closepdf')
-          this.closepdf();
-        }
-        this.$nextTick(() => {
-          if (val) {
-            this.pageNum = 1
-            this.initPage = true
-            this.loadUrl(val)
-          }
-          if (this.showPages) {
-            this.$refs.switchPage.setPage(1)
-          }
-        })
-      },
-      immediate: true,
-    },
-    // 监听页码变化，渲染对应合同页
-    page(newPage, oldPage) {
-      // console.log('watch page change: ', newPage)
-      if (this.pdfDoc) {
-        this.queueRenderPage(newPage)
-      } else {
-        this.pageNum = newPage
-        // console.log('no pdfDoc')
-      }
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.pdf-view {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.pdf-view-control {
-  text-align: center;
-  margin: 10px 0;
-}
-.pdf-view-area-wapper {
-  flex: 1 1 0%;
-  overflow: auto;
-  width: 100%;
-  flex-shrink: 0%;
-}
-.pdf-view-area {
-  position: relative;
-  min-height: 100px;
-  .canvasstyle {
-    display: block;
-    margin: 0 auto;
-  }
-  .label-area {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    left: 0;
-  }
-}
-.pdf-view-empty {
-  text-align: center;
-  line-height: 150px;
-  font-size: 14px;
-  color: #999;
-}
-
-.pdf-view-loading, .pdf-view-rendering {
-  margin-top: 40px;
-  text-align: center;
-  font-size: 14px;
-  color: #999;
-}
-</style>
+<template>
+  <div class="pdf-view" :style="style">
+    <div class="pdf-view-control" v-if="showPages">
+      <switch-page ref="switchPage" :scale='compuscale' :numPages="page_count"
+      :page="page" :zoomEnable="zoomEnable" :rotateEnable="rotateEnable"
+       @page="onChangePage" @zoom="onScale" @rotate="onRotate"></switch-page>
+    </div>
+    <div class="pdf-view-area-wapper" :style="{width: pdfWidth}" >
+      <div>
+        <div
+          class="center pdf-view-area"
+          @drop="onDrop"
+          @dragover="onDragOver"
+          :key="pdfurl"
+          :style="{'border': border?'1px solid #666': ''}"
+          v-if="pdfurl"
+        >
+          <div v-if="fileLoading"  class="pdf-view-loading">文件加载中...</div>
+          <div v-else-if="pageRendering" class="pdf-view-rendering">内容渲染中...</div>
+          <canvas :key="pdfurl +'canvas'" class="canvasstyle" ref="canvas"></canvas>
+          <div class="label-area">
+            <slot></slot>
+          </div>
+        </div>
+        <div v-else class="pdf-view-empty">未找到资源，请联系管理员!</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import { Message } from 'element-ui';
+import SwitchPage from './SwitchPage.vue'
+
+function getChromeVersion() {
+  const arr = navigator.userAgent.split(' ');
+  let chromeVersion = '';
+  for (let i = 0; i < arr.length; i++) {
+    if (/chrome/i.test(arr[i])) chromeVersion = arr[i]
+  }
+  if (chromeVersion) {
+    return Number(chromeVersion.split('/')[1].split('.')[0]);
+  }
+  return false;
+}
+let version = ''
+if (getChromeVersion()) {
+  version = getChromeVersion();
+  if (version < 98) {
+    Message({
+      message: `您使用的谷歌浏览器版本过低【version:${version}】，为了更好地体验请将浏览器升级到最新版本！`,
+      type: 'error',
+      duration: 1800,
+    })
+  }
+}
+
+const PDFJS = require('pdfjs-dist')
+
+const defautScale = 1.0
+// PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/legacy/build/pdf.worker.min.js')
+PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.min.js')
+// https://unpkg.com/pdfjs-dist@2.16.105/cmaps/
+// 使用代理的cmaps，会导致加载很慢，改用本地
+//  const cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/'
+const cMapUrl = 'https://wsp.totodi.com/staticfiles_web/web/pdfjs/cmaps/'
+
+PDFJS.cMapPacked = true
+PDFJS.cMapUrl = cMapUrl
+
+export const maxscale = 3
+export const minscale = 0.2
+
+export default {
+  components: { SwitchPage },
+  props: {
+    pdfurl: {
+      default: '',
+    },
+    scale: {
+      type: Number,
+      default: defautScale,
+    },
+    showPages: {
+      type: [String, Number, Boolean],
+      default: true,
+    },
+    zoomEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    rotateEnable: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    border: {
+      type: [String, Number, Boolean],
+      default: true,
+    },
+    marginAuto: {
+      type: [String, Number, Boolean],
+      default: false,
+    },
+    page: {
+      type: [String, Number],
+      default: 1,
+    },
+    showWidth: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      pdfDoc: null, // pdfjs 生成的对象
+      viewport: null,
+      pageNum: 1, // 当前页数
+      pageRendering: false,
+      fileLoading: true,
+      pageNumPending: null,
+      compuscale: defautScale, // 放大倍数
+      compuRotate: undefined, // 实际旋转度数,  默认值必须是 undefined
+      page_count: 0, // 总页数
+      maxscale, // 最大放大倍数
+      minscale, // 最小放大倍数
+      isready: false,
+      initPage: true, // 初始化页面
+      style: {
+        width: '860px', // 先给个默认值，当渲染后，后自动按实际值渲染，否则打标签那里，会显示异常
+        margin: this.marginAuto === '' || this.marginAuto ? '0 auto' : '0',
+      },
+      pdfWidth: '858px',
+    }
+  },
+  methods: {
+    async renderPage(num) {
+      console.log('renderPage ', this.pageRendering)
+      if (this.pageRendering) {
+        this.pageNumPending = num;
+      } else {
+      // 渲染pdf
+        const vm = this
+        this.pageRendering = true
+        // Using promise to fetch the page
+        if (!this.pdfDoc) {
+          return false
+        }
+        try {
+          const page = await this.pdfDoc.getPage(num)
+          let scaleNum = vm.compuscale
+          let viewport = ''
+          const viewboxWidth = this.showWidth
+          if (this.initPage) {
+            viewport = page.getViewport({ scale: 1.0 })
+            if (viewboxWidth) {
+              const desiredWidth = parseInt(viewboxWidth, 10) - 2
+              // 首先获得pdf 原本宽度，然后根据showWidth 计算缩放倍数
+              scaleNum = desiredWidth / viewport.width
+              this.compuscale = scaleNum
+              this.maxscale = scaleNum
+            }
+            // console.log('xxxxxx', this.compuRotate, viewport.rotation)
+            this.compuRotate = viewport.rotation
+            this.initPage = false
+          }
+          // 重新渲染 缩放过的PDF
+          viewport = page.getViewport({ scale: scaleNum, rotation: this.compuRotate })
+          this.viewport = viewport
+
+          // 将 canvas 尺寸 传给父组件
+          this.$emit('size', viewport, num)
+
+          // Render PDF page into canvas context
+          vm.isready = true
+
+          const { canvas } = vm.$refs
+          if (!canvas) {
+            return false
+          }
+          this.style.width = `${viewport.width + 2}px`;
+          this.pdfWidth = `${viewport.width}px`;
+          canvas.height = viewport.height
+          canvas.width = viewport.width
+
+          const renderContext = {
+            canvasContext: canvas.getContext('2d'),
+            viewport,
+          }
+          // Wait for rendering to finish
+          await page.render(renderContext).promise
+          // console.log(' await page.render 168')
+          vm.pageRendering = false
+          if (vm.pageNumPending !== null) {
+          // New page rendering is pending
+            vm.renderPage(vm.pageNumPending)
+            vm.pageNumPending = null
+          }
+          this.$emit('renderSuccess')
+        } catch (error) {
+          console.error(error)
+        } finally {
+          // console.log('finally 178')
+          this.pageRendering = false
+        }
+      }
+    },
+    prev() {
+      // 上一页
+      if (this.pageNum <= 1) {
+        return
+      }
+      this.pageNum--
+      this.queueRenderPage(this.pageNum)
+    },
+    next() {
+      // 下一页
+      if (this.pageNum >= this.page_count) {
+        return
+      }
+      this.pageNum++
+      this.queueRenderPage(this.pageNum)
+    },
+    onChangePage(page) {
+      this.emitPage(page)
+      // switch page  改变页码
+      this.queueRenderPage(page)
+    },
+    emitPage(page) {
+      this.$emit('pageChange', page, this.page_count, page === this.page_count)
+    },
+    closepdf() {
+      // 关闭PDF
+      if (this.pdfDoc) {
+        if (this.viewport) {
+          const { canvas } = this.$refs
+          if (canvas) {
+            const cxt = canvas.getContext('2d')
+            cxt.clearRect(0, 0, this.viewport.width, this.viewport.height);
+          }
+        }
+        this.viewport = null
+        this.pdfDoc.destroy();
+        // console.log('closepdf end')
+      }
+      // this.pdfDoc = null
+      this.isready = false
+      this.compuscale = this.scale
+      this.$emit('closepdf')
+    },
+    queueRenderPage(num) {
+      // console.log('queueRenderPage 226', this.pageRendering)
+      if (this.pageRendering) {
+        this.pageNumPending = num
+      } else {
+        this.renderPage(num)
+      }
+    },
+    async loadUrl(url) {
+      if (!PDFJS) {
+        return false
+      }
+      this.fileLoading = true
+      //  此处无法确定，到底是否使用encodeURI
+      // var reg = /[\u4e00-\u9fa5]+/
+      // if (reg.test(url)) {
+      //   url = encodeURI(url)
+      //   console.log('-----encodeURI------', url)
+      // }
+      console.log('----PdfView---', url)
+      if (this.pdfDoc) {
+        // console.log('pdfDocument is ready  destroy,,')
+        this.pdfDoc.destroy();
+      }
+      let pdfDoc_
+      try {
+        pdfDoc_ = await PDFJS.getDocument({
+          url: encodeURI(url),
+          cMapUrl,
+          cMapPacked: true,
+        }).promise
+      } catch (error) {
+        console.error(error)
+
+        const pdfData = await fetch(
+          new URL(url, window.location).href,
+        );
+        const arrayBufferPdf = await pdfData.arrayBuffer(); // 转成 ArrayBuffer 塞给 pdf.js
+        pdfDoc_ = await PDFJS.getDocument({ data: arrayBufferPdf }).promise;
+      } finally {
+        this.fileLoading = false
+      }
+      // console.log('pdfDoc_', pdfDoc_)
+      // debugger
+      this.pdfDoc = pdfDoc_
+      // 初始化pdf
+      this.page_count = pdfDoc_.numPages
+      this.$emit('numPages', pdfDoc_.numPages)
+      // console.log('265', this.pageRendering)
+      this.renderPage(this.pageNum)
+      this.emitPage(this.pageNum)
+    },
+    onDrop(event) {
+      this.$emit('drop', event)
+    },
+    onDragOver(event) {
+      // 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
+      // 这要通过调用 ondragover 事件的 event.preventDefault() 方法：
+      event.preventDefault()
+    },
+    updateScale() {
+      this.compuscale = this.scale
+      // console.log('updateScale 278')
+      this.renderPage(this.pageNum)
+    },
+    onScale(scale) {
+      this.compuscale = scale
+      this.renderPage(this.pageNum)
+    },
+    onRotate(rotate) {
+      this.compuRotate += rotate
+      this.renderPage(this.pageNum)
+    },
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    // console.log('---', this.pdfDoc)
+    if (this.pdfDoc) {
+      this.closepdf();
+    }
+  },
+  watch: {
+    scale: {
+      handler(val) {
+        if (val) {
+          this.compuscale = val
+        }
+      },
+      immediate: true,
+    },
+    pdfurl: {
+      handler(val) {
+        // console.log('watch url change: ', val)
+        if (this.pdfDoc) {
+          // console.log('closepdf')
+          this.closepdf();
+        }
+        this.$nextTick(() => {
+          if (val) {
+            this.pageNum = 1
+            this.initPage = true
+            this.loadUrl(val)
+          }
+          if (this.showPages) {
+            this.$refs.switchPage.setPage(1)
+          }
+        })
+      },
+      immediate: true,
+    },
+    // 监听页码变化，渲染对应合同页
+    page(newPage, oldPage) {
+      // console.log('watch page change: ', newPage)
+      if (this.pdfDoc) {
+        this.queueRenderPage(newPage)
+      } else {
+        this.pageNum = newPage
+        // console.log('no pdfDoc')
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.pdf-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 688px;
+}
+.pdf-view-control {
+  text-align: center;
+  margin: 10px 0;
+}
+.pdf-view-area-wapper {
+  flex: 1 1 0%;
+  overflow: auto;
+  width: 100%;
+  flex-shrink: 0%;
+}
+.pdf-view-area {
+  position: relative;
+  min-height: 100px;
+  .canvasstyle {
+    display: block;
+    margin: 0 auto;
+  }
+  .label-area {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+  }
+}
+.pdf-view-empty {
+  text-align: center;
+  line-height: 150px;
+  font-size: 14px;
+  color: #999;
+}
+
+.pdf-view-loading, .pdf-view-rendering {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 14px;
+  color: #999;
+}
+</style>